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 consumes the data rather than prop-drilling from a parent.

Add 'use client' only when a component needs interactivity such as useState, useEffect, event handlers, or browser APIs. Start with Server Components by default and push client boundaries as far down the component tree as possible.

Server Actions are async functions marked with 'use server' that run on the server and can be called from Client Components or forms. They support revalidateTag and revalidatePath for cache updates and redirect for navigation after mutations.

Yes, wrap slow data-fetching components in Suspense boundaries or add a loading.tsx file to stream UI progressively. The initial shell renders immediately while slower sections like reviews or recommendations stream in as their data resolves.

Create a slot like @modal with a (.)photos/[id] intercepting route that renders the content in a Modal component, plus a default.tsx fallback. The same route renders as a full page on direct navigation and as a modal when navigated to client-side.

Props crossing the Server-to-Client boundary must be serializable, so functions, class instances, and Dates cannot be passed directly. Fetch data in the Server Component and pass plain objects, or use Server Actions for callbacks.