nextjs-knowledge-skill

SSR renders pages on each request for dynamic content, SSG pre-builds static pages at build time for performance, and ISR revalidates static pages on a schedule without rebuilding. Choose SSR for user-specific data, SSG for stable content, and ISR for content that updates periodically.

Server Components run only on the server, reducing JavaScript sent to browsers and enabling direct database access, while Client Components run in the browser for interactivity and state management. App Router defaults to Server Components; mark interactive components with 'use client'.

Fetch data directly in Server Components using async/await, leverage Next.js caching automatically, and use Client Components with useEffect only when browser-side fetching is necessary. This pattern reduces API calls and improves performance.

Static export generates a fully static site but requires generateStaticParams to pre-define dynamic route segments at build time. Routes without pre-generated params won't be available in the static export output.

Use CSS Modules for component scoping across SSR, SSG, and ISR. Tailwind CSS works seamlessly with all rendering strategies. Avoid runtime CSS-in-JS libraries with SSG and ISR; they add JavaScript overhead during static generation.

Streaming sends HTML chunks progressively using React Server Components and Suspense boundaries, letting browsers render content while the server processes data. Wrap slow components in Suspense with a fallback to enable streaming.