nextjs_specialist

Fetch data directly inside async Server Components using the fetch API with cache options. Use cache: 'force-cache' for static data, 'no-store' for fresh data per request, or next: { revalidate: 60 } for ISR. Use Promise.all to prevent request waterfalls.

Use Server Components by default for data fetching, backend access, and sensitive logic. Use Client Components with the 'use client' directive only for interactivity like onClick handlers, useState hooks, and browser APIs such as localStorage.

SSG generates pages at build time by default, SSR renders on every request using export const dynamic = 'force-dynamic', and ISR regenerates static pages on an interval using export const revalidate = 60. Choose based on data freshness requirements.

Server Actions are async functions marked with 'use server' that handle form submissions directly via the form action attribute. Validate inputs with Zod, call revalidatePath to refresh cached data, and manually verify authentication inside each action.

Hydration errors occur when Server and Client rendered HTML mismatch, often from using browser APIs during render or non-deterministic values like dates. Keep Client Components at leaf nodes and move browser-dependent logic into useEffect.