SSR vs CSR vs SSG vs ISR?
Practice this questionWANT TO UNDERSTAND THE CONCEPT FIRST?Learn SSR vs CSR vs SSG vs ISR?
Definition:
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.
Key points:
-
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:
| Strategy | When content is generated | Typical fit |
|---|---|---|
| SSR | For a request | Request-specific content |
| CSR | In the browser | Interactive views after JavaScript loads |
| SSG | Before requests, usually at build time | Mostly fixed public pages |
| ISR | Generated pages refreshed after deployment | Public content with an allowed stale window |
- These are rendering strategies, not security guarantees; individual pages can combine server output with client interaction.
Interview point:
- Choose from the page's freshness and interaction requirements rather than assuming one rendering mode is best for every route.
Adapted from 06_REACT_NEXTJS.md · “SSR vs CSR vs SSG vs ISR?”. Code examples are study fragments. Difficulty and core labels are editorial estimates; version-specific behavior should be checked against your project.