Backend interview prep

Start

Next.js SSR, SSG, ISR and CSR Interview Questions and Answers (2026)

Master Next.js rendering strategies including SSR, SSG, ISR, and CSR with production-ready interview questions, practical examples, caching, and senior-level best practices.

Next.js SSR, SSG, ISR and CSR Interview Questions and Answers

Introduction

One of the biggest advantages of Next.js is its ability to support multiple rendering strategies. Unlike traditional React applications that render everything in the browser, Next.js allows developers to choose the most appropriate rendering strategy for each page.

Choosing between Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR) directly impacts:

  • Performance
  • SEO
  • Scalability
  • Server Cost
  • User Experience

Senior frontend engineers are expected to understand when each rendering strategy should be used in production.

This guide covers the 15 most frequently asked Next.js rendering interview questions with production examples, architecture diagrams, and senior-level best practices.

Q1. What is Server-Side Rendering (SSR)?

Answer

Server-Side Rendering (SSR) generates HTML for every incoming request.

Flow

graph TD
    User_Request[User Request] --> Next_js_Server[Next.js Server]
    Next_js_Server[Next.js Server] --> Fetch_Data[Fetch Data]
    Fetch_Data[Fetch Data] --> Generate_HTML[Generate HTML]
    Generate_HTML[Generate HTML] --> Send_HTML[Send HTML]
    Send_HTML[Send HTML] --> Hydration[Hydration]

Example

export const dynamic = "force-dynamic";

export default async function Page() {

    const users = await fetch("https://api.example.com/users");

    return <h1>Users</h1>;

}

Why Interviewers Ask This

SSR is one of the core rendering strategies in Next.js.

Production Example

  • Banking dashboard
  • Stock prices
  • Live order tracking
  • Personalized user dashboard

Q2. What is Static Site Generation (SSG)?

Answer

SSG generates HTML during the build process.

Flow

graph TD
    Build_Time[Build Time] --> Generate_HTML[Generate HTML]
    Generate_HTML[Generate HTML] --> Deploy[Deploy]
    Deploy[Deploy] --> Serve_Static_File[Serve Static File]

Example

export const dynamic = "force-static";

Production Example

  • Blogs
  • Documentation
  • Company website
  • Landing pages

Q3. What is Incremental Static Regeneration (ISR)?

Answer

ISR combines the advantages of SSR and SSG.

Pages are generated statically and automatically regenerated after a configured interval.

Example

export const revalidate = 60;

Meaning

Rebuild page every 60 seconds

Flow

graph TD
    Build_Page[Build Page] --> Serve_Cached_Page[Serve Cached Page]
    Serve_Cached_Page[Serve Cached Page] --> Revalidation_Time_Reached[Revalidation Time Reached]
    Revalidation_Time_Reached[Revalidation Time Reached] --> Generate_New_Version[Generate New Version]

Production Example

  • News websites
  • Product catalogs
  • Job portals

Q4. Difference between SSR, SSG, ISR, and CSR?

Feature SSR SSG ISR CSR
Generated Every Request Build Time Build + Revalidate Browser
SEO Excellent Excellent Excellent Limited
Performance Good Excellent Excellent Depends
Fresh Data Always No Yes Yes
Server Load High Low Medium Low

Interview Tip

No rendering strategy is universally best. Choose based on application requirements.

Q5. When should SSR be used?

Answer

Use SSR when data changes for every request.

Examples

  • User profile
  • Banking portal
  • Flight booking
  • Shopping cart
  • Personalized dashboard

Benefits

  • Fresh data
  • Excellent SEO
  • Dynamic rendering

Q6. When should SSG be used?

Answer

Use SSG for pages that rarely change.

Examples

  • Blog articles
  • Documentation
  • Marketing pages
  • Company information
  • FAQ pages

Benefits

  • Extremely fast
  • CDN friendly
  • Low server cost

Q7. When should ISR be used?

Answer

Use ISR when data changes periodically but not on every request.

Examples

  • Product catalog
  • News website
  • Restaurant menu
  • Course catalog
  • Pricing pages

Benefits

  • Fresh content
  • High performance
  • Reduced server load

Q8. What is Dynamic Rendering?

Answer

Dynamic rendering generates HTML at request time.

Example

export const dynamic = "force-dynamic";

Production Example

Authenticated pages requiring personalized content.

Q9. What is the revalidate property?

Answer

revalidate specifies how often a page should be regenerated.

Example

export const revalidate = 300;

Meaning

Regenerate every 5 minutes

Production Example

E-commerce product pages.

Q10. How does Next.js caching work?

Answer

Next.js caches:

  • HTML
  • Fetch responses
  • Images
  • Route segments
  • Static assets

Flow

graph TD
    Request[Request] --> Cache_Exists[Cache Exists?]
    Cache_Exists[Cache Exists?] --> Yes_Return_Cached_Page[Yes ─────► Return Cached Page]
    Yes_Return_Cached_Page[Yes ─────► Return Cached Page] --> No[No]
    No[No] --> Generate_Response[Generate Response]
    Generate_Response[Generate Response] --> Store_in_Cache[Store in Cache]

Benefits

  • Faster responses
  • Lower server cost
  • Better scalability

Q11. What is Fetch Caching in Next.js?

Answer

The built-in fetch() API supports caching.

Example

await fetch(url, {

cache: "force-cache"

});

Options

force-cache

no-store

revalidate

Production Example

Cache frequently accessed product information.

Q12. Give production examples of SSR, SSG, and ISR.

Rendering Example
SSR Banking Dashboard
SSR User Profile
SSG Blog
SSG Documentation
ISR Product Catalog
ISR News Website
CSR Chat Application
CSR Analytics Dashboard

Q13. What are common rendering interview mistakes?

Answer

Common mistakes include:

  • Using SSR for every page.
  • Forgetting SEO requirements.
  • Ignoring caching.
  • Regenerating pages too frequently.
  • Using CSR for marketing pages.
  • Using SSG for real-time dashboards.

Q14. What are the performance implications of different rendering strategies?

Answer

SSR

  • Fresh data
  • Higher server load

SSG

  • Fastest response
  • Lowest server cost

ISR

  • Excellent balance
  • Controlled regeneration

CSR

  • More JavaScript
  • Slower first paint
  • Good for highly interactive applications

Q15. What are senior-level rendering best practices?

Answer

Senior developers should:

  • Prefer SSG whenever possible.
  • Use ISR for semi-dynamic content.
  • Reserve SSR for personalized pages.
  • Use CSR only for browser-dependent functionality.
  • Optimize caching.
  • Minimize unnecessary server rendering.
  • Monitor Core Web Vitals.
  • Choose rendering per route instead of applying one strategy globally.

Production Checklist

  • Appropriate rendering strategy
  • SEO optimization
  • Proper caching
  • Minimal server load
  • Fast first paint
  • Good user experience

Common Rendering Interview Mistakes

  • Assuming SSR is always better than SSG.
  • Treating ISR as a replacement for SSR.
  • Ignoring CDN caching.
  • Overusing Client-Side Rendering.
  • Choosing rendering strategies without considering SEO.
  • Forgetting that different pages can use different rendering strategies.

Senior Developer Best Practices

  • Use SSG for static marketing and documentation pages.
  • Use ISR for content that changes periodically.
  • Use SSR only when every request requires fresh or personalized data.
  • Use CSR for browser-only interactions after the initial page load.
  • Cache aggressively where possible.
  • Monitor page performance with Lighthouse and Core Web Vitals.
  • Avoid unnecessary dynamic rendering.
  • Select rendering strategies on a per-page basis rather than using one approach across the entire application.

Interview Quick Revision

Rendering Strategy Best Use Case
SSR Personalized pages
SSG Static websites
ISR Frequently updated content
CSR Interactive dashboards
revalidate Automatic regeneration
force-dynamic Always render on server
force-static Generate at build time
fetch() Cache Data caching
CDN Static asset delivery
Hydration Makes HTML interactive

Rendering Strategy Comparison

graph TD
    Next_js_Rendering[Next.js Rendering] --> N_[┌───────────────┼────────────────┐]
    N_[┌───────────────┼────────────────┐] --> N_[▼               ▼                ▼]
    N_[▼               ▼                ▼] --> SSR_SSG_CSR[SSR             SSG              CSR]
    SSR_SSG_CSR[SSR             SSG              CSR] --> N_[│               │                │]
    N_[│               │                │] --> Every_Request_Build_Time_Brows[Every Request     Build Time      Browser Only]
    Every_Request_Build_Time_Brows[Every Request     Build Time      Browser Only] --> N_[│               │                │]
    N_[│               │                │] --> N_[└───────────────┼────────────────┘]
    N_[└───────────────┼────────────────┘] --> ISR[ISR]
    ISR[ISR] --> Static_Automatic_Updates[Static + Automatic Updates]

Request Lifecycle

graph TD
    User_Request[User Request] --> Determine_Rendering_Strategy[Determine Rendering Strategy]
    Determine_Rendering_Strategy[Determine Rendering Strategy] --> SSR_Generate_HTML[├──────── SSR ───────► Generate HTML]
    SSR_Generate_HTML[├──────── SSR ───────► Generate HTML] --> SSG_Return_Static_HTML[├──────── SSG ───────► Return Static HTML]
    SSG_Return_Static_HTML[├──────── SSG ───────► Return Static HTML] --> ISR_Return_Cached_HTML[├──────── ISR ───────► Return Cached HTML]
    ISR_Return_Cached_HTML[├──────── ISR ───────► Return Cached HTML] --> N_[│                         │]
    N_[│                         │] --> N_[│                         ▼]
    N_[│                         ▼] --> Revalidate_if_Needed[│                   Revalidate if Needed]
    Revalidate_if_Needed[│                   Revalidate if Needed] --> CSR_Download_JavaScript[└──────── CSR ───────► Download JavaScript]
    CSR_Download_JavaScript[└──────── CSR ───────► Download JavaScript] --> Render_in_Browser[Render in Browser]

Rendering Decision Guide

Scenario Recommended Strategy
Company Landing Page SSG
Blog SSG
Product Catalog ISR
News Portal ISR
Stock Market Dashboard SSR
Banking Dashboard SSR
Shopping Cart SSR
Chat Application CSR
Admin Dashboard CSR + SSR
User Profile SSR

Key Takeaways

  • Next.js supports multiple rendering strategies: SSR, SSG, ISR, and CSR.
  • SSR generates HTML for every request and is ideal for personalized or real-time data.
  • SSG generates pages at build time and delivers the best performance for static content.
  • ISR combines static generation with periodic regeneration, making it ideal for frequently updated content.
  • CSR renders pages in the browser and is best suited for highly interactive user interfaces.
  • The revalidate property enables automatic regeneration of static pages.
  • Built-in fetch caching improves performance and reduces server load.
  • Choosing the correct rendering strategy depends on data freshness, SEO requirements, scalability, and user experience.
  • Understanding rendering strategies is one of the most important Next.js interview topics for frontend engineers.