Explain the difference between SSR, SSG, ISR, and CSR in Next.js. When would you choose each?

Question

Accepted Answer

Next.js offers four primary rendering strategies: Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR), and Client-Side Rendering (CSR). Each strategy determines when and where the HTML for your pages is generated, with different trade-offs in performance, SEO, data freshness, and user experience. Modern Next.js applications often combine multiple strategies within the same application, using SSG for marketing content, ISR for product pages, SSR for personalized dashboards, and CSR for interactive components that need real-time updates. **SSR (Server-Side Rendering):** HTML generated per request on the server. Best for personalized, user-specific content that needs to be fresh and indexable . **SSG (Static Site Generation):** HTML generated at build time. Best for public, unchanging content where performance is critical . **ISR (Incremental Static Regeneration):** SSG with background updates. Best for large sites where content changes but not instantly, combining static speed with freshness . **CSR (Client-Side Rendering):** HTML generated in browser after JavaScript loads. Best for highly interactive, authenticated content where SEO isn't a priority . // app/dashboard/page.tsx // SSR: Rendered on each request for fresh, user-specific data // Force dynamic rendering export const dynamic = 'force-dynamic'; // or use noStore() import { noStore } from 'next/cache'; export default async function DashboardPage() { noStore(); // Ensures dynamic rendering // Get user session - forces dynamic const session = await getSession(); // Fetch fresh data every request const dashboardData = await fetch('https://api.example.com/dashboard', { headers: { Authorization: `Bearer ${session?.token}` }, cache: 'no-store' // Ensures no caching }).then(r => r.json()); return (

Welcome back, {session?.user.name}

Current balance: ${dashboardData.balance}

Recent transactions: {dashboardData.transactions.length}

); } // Choose SSR when: // ✓ Data changes with every request // ✓ Content is user-specific (auth required) // ✓ SEO matters but data must be fresh // ✓ You need request-time headers/cookies // ✗ Higher server load and slower TTFB // app/blog/[slug]/page.tsx // SSG: Pre-rendered at build time for maximum performance // Generate all possible paths at build time export async function generateStaticParams() { const posts = await fetch('https://api.example.com/posts') .then(r => r.json()); return posts.map((post) => ({ slug: post.slug, })); } export default async function BlogPost({ params }: { params: { slug: string } }) { // This fetch runs at build time const post = await fetch(`https://api.example.com/posts/${params.slug}`, { // Cache forever - content doesn't change cache: 'force-cache' }).then(r => r.json()); return (

{post.title}

{post.publishedAt}

{post.content}

); } // Choose SSG when: // ✓ Content is public and same for all users // ✓ Content changes infrequently // ✓ Performance is critical (CDN edge delivery) // ✓ SEO is important // ✗ Content needs real-time updates // ✗ User personalization required // app/products/[id]/page.tsx // ISR: Static with background updates // Revalidate every hour export const revalidate = 3600; // Generate only popular products at build time export async function generateStaticParams() { const popularProducts = await fetch('https://api.example.com/products?popular=true') .then(r => r.json()); return popularProducts.map((p) => ({ id: p.id.toString(), })); } export default async function ProductPage({ params }: { params: { id: string } }) { const product = await fetch(`https://api.example.com/products/${params.id}`, { // Use ISR with tags for on-demand updates next: { revalidate: 3600, tags: [`product-${params.id}`] } }).then(r => r.json()); if (!product) { return notFound(); } return (

{product.name}

Price: ${product.price}

In stock: {product.stock}

{/* Real-time inventory on client */}

); } // Choose ISR when: // ✓ You have thousands/millions of pages // ✓ Content updates but not instantly // ✓ You need static performance with fresh data // ✓ You want on-demand updates via webhooks // ✓ Build-time generation of all pages is impractical // ✗ Content needs real-time updates (< 1s) // app/analytics/page.tsx // Server component that loads client-side analytics export default function AnalyticsPage() { return (

Analytics Dashboard

{/* Client component fetches and renders data */}

); } // app/analytics/ClientAnalytics.tsx 'use client'; import { useState, useEffect } fro

Explain the difference between SSR, SSG, ISR, and CSR in Next.js. When would you choose each?

SSR renders pages on each request, SSG pre-renders at build time, ISR adds background updates to SSG, and CSR renders in the browser—choose based on data freshness needs, performance requirements, and user personalization

Explain the difference between SSR, SSG, ISR, and CSR in Next.js. When would you choose each?

SSR renders pages on each request, SSG pre-renders at build time, ISR adds background updates to SSG, and CSR renders in the browser—choose based on data freshness needs, performance requirements, and user personalization

Scenario Questions

Follow-up Questions