nextjs-app-router-patterns

Fetch data directly in async Server Components using the fetch API with caching options like next.revalidate for ISR or next.tags for tag-based invalidation. Server Components run only on the server, so you can access databases and secrets without exposing them to the client.

Use Server Components by default for data fetching, heavy computation, and accessing secrets. Add 'use client' only when you need interactivity, React hooks like useState, or browser APIs, keeping client boundaries as small as possible.

Server Actions are async functions marked with 'use server' that run on the server for mutations like form submissions. They support revalidateTag and revalidatePath for cache invalidation, and can be called from Client Components within startTransition.

Yes, App Router supports streaming by wrapping slow data-fetching components in Suspense boundaries with skeleton fallbacks. The page shell renders immediately while slower sections like reviews or recommendations stream in progressively.

Use the (.)folder convention inside a @modal slot to intercept a route and render it in a modal, while keeping the original route as a full page for direct navigation. Add a default.tsx in the slot to handle cases where no modal is active.

Fetch requests are cached by default in App Router, so stale data persists until revalidation. Set next.revalidate for time-based ISR, use cache: 'no-store' for always-fresh data, or call revalidateTag from a Server Action after mutations.