nextjs-app-router-patterns

Server Components are the default in the App Router, so any component without a 'use client' directive runs on the server. Fetch data directly inside async components and pass serializable props down to Client Components for interactivity.

Use the next option in fetch with revalidate for time-based ISR or tags for on-demand invalidation. Call revalidateTag or revalidatePath from next/cache inside a Server Action after a mutation to refresh stale data.

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 and push client boundaries as far down the tree as possible.

Parallel routes use named slots like @analytics and @team folders that render simultaneously in the same layout. Each slot gets its own loading.tsx and error.tsx, enabling independent streaming and error boundaries per panel.

Server Components render only on the server and never hydrate in the browser, so React hooks like useState and useEffect have no runtime to execute in. Move stateful logic into a child Client Component marked with 'use client'.

Props crossing the server-client boundary must be serializable, so functions, class instances, and Dates in some cases cannot be passed directly. Pass plain objects, strings, numbers, and arrays, or use Server Actions for callable behavior.