What is the difference between SSR, SSG and CSR in React?
Quick answer
CSR renders in the browser after JavaScript loads, SSR renders the HTML on the server for each request, and SSG renders the HTML once at build time; SSR and SSG give crawlers and users content faster, which helps SEO.
With client-side rendering the server sends an almost empty HTML file and the browser builds the page after downloading and running JavaScript. It is simple to host but the first paint is slower and search engines must run JavaScript to see the content.
Server-side rendering generates HTML per request, so content is visible immediately and is always fresh, at the cost of server work and a slower time to first byte. Static site generation builds HTML ahead of time and serves it from a CDN, which is the fastest option for content that does not change per user. Incremental static regeneration (as used by Next.js) rebuilds static pages in the background on a schedule.
In every case React then hydrates the HTML in the browser, attaching event handlers so the page becomes interactive. Mismatches between server and client output cause hydration errors.
Key points
- CSR: render in browser. SSR: render per request. SSG: render at build time
- SSR and SSG improve first paint and SEO
- Hydration makes server-rendered HTML interactive
Questions interviewers ask next
- What are React Server Components?
- What causes hydration errors?