nextjs-app-router-patterns

Fetch data directly inside async Server Components using the fetch API with caching options like next.revalidate for ISR or next.tags for tag-based invalidation. Colocate the fetch call in the component that uses the data, and wrap slow sections in Suspense boundaries for streaming.

Add 'use client' only when a component needs interactivity such as useState, useEffect, event handlers, or browser APIs. Keep components as Server Components by default since they can fetch data directly and never ship their code to the browser.

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 can redirect users after completion.

Yes, intercepting routes like (.)photos/[id] are typically placed inside a parallel route slot such as @modal to show modal overlays while preserving the full page for direct navigation. The layout receives both children and the modal slot as props.

Streaming fails when the awaited data fetch happens 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.