LearnAndCode
Next.jsLearning
LESSON 03 / 9·2 min readIntermediate

SSR vs CSR vs SSG vs ISR?

Try code in the playground
01 Understand02 Recall03 Prepare

Understand the concept

SSR, CSR, SSG and ISR describe when and where page content is generated. SSR renders for requests, CSR builds UI in the browser, SSG generates static content ahead of requests, and ISR refreshes generated content after deployment. The choice trades freshness, server work, cacheability and initial loading behavior.

Important ideas

  • SSR: generate HTML for a request. CSR: render in the browser.

  • SSG: generate static pages ahead of requests, usually at build time.

  • ISR: refresh generated pages after deployment; consider how much stale data is acceptable.

  • Private user data needs careful handling even on a page with mostly static content; do not cache personalized results publicly.

Comparison:

StrategyWhen content is generatedTypical fit
SSRFor a requestRequest-specific content
CSRIn the browserInteractive views after JavaScript loads
SSGBefore requests, usually at build timeMostly fixed public pages
ISRGenerated pages refreshed after deploymentPublic content with an allowed stale window
  • These are rendering strategies, not security guarantees; individual pages can combine server output with client interaction.
PAUSE & RECALL

Can you explain it without the notes?

SSR vs CSR vs SSG vs ISR?

Use your own words. Explain an example and one limitation before checking the explanation.

Check your explanation

SSR, CSR, SSG and ISR describe when and where page content is generated. SSR renders for requests, CSR builds UI in the browser, SSG generates static content ahead of requests, and ISR refreshes generated content after deployment. The choice trades freshness, server work, cacheability and initial loading behavior.

CONNECT IT TO YOUR INTERVIEW

Turn this concept into a clear answer.

  • Choose from the page's freshness and interaction requirements rather than assuming one rendering mode is best for every route.

SSR vs CSR vs SSG vs ISR?

Next.js·Next.js architecture

SSR, CSR, SSG and ISR describe when and where page content is generated. SSR renders for requests, CSR builds UI in the browser, SSG generates static content ahead of requests, and ISR refreshes generated content after deployment. The choice trades freshness, server work, cacheability and initial loading behavior.

Intermediate2 min read
Practice this concept
YOUR NEXT STEP

Keep connecting the ideas.

Next lesson: What are streaming and Suspense?
PREVIOUS LESSONServer Component vs Client Component?LESSON MAPExplore the learning path

Adapted from 06_REACT_NEXTJS.md · “SSR vs CSR vs SSG vs ISR?”. Examples are study fragments; framework behavior can depend on your version.