nextjs-app-architecture

Organize code into feature folders under features/<domain>/ with <domain>-queries.ts (marked import 'server-only'), <domain>-actions.ts (marked 'use server'), and a components/ directory. Pages in app/ stay synchronous, compose feature components, and place Suspense boundaries without fetching data themselves.

Use params.then() or searchParams.then() inside the page body instead of await params at the top, or Promise.all([params, searchParams]).then(...) when both are needed. Content above the .then() paints into the static shell while data-dependent sections suspend behind page-owned Suspense boundaries.

Use 'use cache' with cacheTag and cacheLife under Cache Components to share reads across requests, and reserve React cache() for proven same-request deduplication of dynamic queries. Do not add cache() to a function that already uses 'use cache' unless a separate same-request duplication problem exists.

Yes. Without cacheComponents: true, skip 'use cache', cacheTag, and cacheLife, use plain server-only async queries by default, and invalidate with refresh() from server actions. Pages still use params.then() so chrome paints before route-specific data resolves.

Builds fail when async work lacks both 'use cache' and an ancestor Suspense boundary, when request data appears inside 'use cache', or when a page awaits params at the top. Cache the reusable read, wrap justified dynamic reads in a page-owned Suspense, and keep pages synchronous with params.then().

Export each skeleton from the same file as its component, defined at the end of the file, such as Feed and FeedSkeleton as siblings. The page imports both and places the Suspense boundary; features never pre-wrap themselves, and alias skeleton wrappers that only pass props should be avoided.