nextjs-app-router-patterns

Fetch data directly inside async Server Components using the fetch API with cache options like next: { revalidate: 60 } for ISR or next: { tags: ['products'] } for tag-based invalidation. Colocate the fetch where the data is rendered and wrap slow sections in Suspense boundaries.

Migrate incrementally by moving routes into the app directory, converting data fetching from getServerSideProps to async Server Components, and replacing API routes with route handlers in route.ts files. Add 'use client' only to components needing hooks or browser APIs.

Use Server Components for data fetching, heavy computation, and accessing secrets, since they render only on the server. Use Client Components marked with 'use client' for interactivity, React hooks like useState, and browser APIs.

Server Actions are async functions marked with 'use server' that run on the server for mutations like form submissions. They support progressive enhancement, can call revalidateTag or revalidatePath to refresh cached data, and redirect users after completion.

Intercepting routes let you load a route within the current layout, commonly for modal patterns like photo previews. Use the (.)folder convention inside a parallel route slot such as @modal, with a default.tsx fallback for hard navigations.

Streaming fails when data is fetched at the page level before rendering, blocking the entire response. Move slow fetches into child components wrapped in Suspense boundaries with skeleton fallbacks so the shell renders immediately.