Q3: What are the main rendering modes supported by Next.js (SSR, SSG, ISR, CSR)?
- SSR (Server-Side Rendering): HTML generated on every user request.
- SSG (Static Site Generation): HTML built once at build time.
- ISR (Incremental Static Regeneration): Re-generates static HTML pages in the background after deployment without a full site rebuild.
- CSR (Client-Side Rendering): Rendered dynamically inside the browser.
Fetching Strategy Flags in App Router fetch()
// 1. SSG (Static Default)
fetch('https://api.com/data', { cache: 'force-cache' });
// 2. SSR (Dynamic per Request)
fetch('https://api.com/data', { cache: 'no-store' });
// 3. ISR (Revalidate every 60 seconds)
fetch('https://api.com/data', { next: { revalidate: 60 } });💡 App Router configures rendering behavior through options in native fetch calls.
Key Takeaways
- SSG offers maximum speed for static content (blogs, docs).
- ISR updates static pages periodically on demand using background revalidation.
Knowledge Check
Which rendering strategy allows updating a static landing page periodically after site deployment without triggering a full rebuild?