Static Site Generation vs Server-side Rendering vs Client-side Rendering
What does "rendering" mean?
Rendering = generating HTML
3 primary rendering modes
A rendering mode defines the stage at which your page’s user-facing HTML is generated.
- Static Site Generation (SSG): render at build time.
- Server-side Rendering (SSR): render at run time, on server-side.
- Client-side Rendering (CSR): render at run time, on client-side (browsers).
Many popular frameworks (e.g. Next.js, Gasby.js) now support multiple rendering options.
Static Site Generation (SSG)
- No running servers or databases.
- Can be easily deployed to cloud storages (AWS S3, GCP Cloud Storage, etc).
- Content gets to the user faster.
- Secure, no binaries to be hacked.
- Can be cached by the CDN.
- Individual HTML files must be generated for every possible URL.
- Cannot handle dynamic routes; infeasible if you don’t know all the URLs at the build time
- Long time to build and deploy if your site has a large number of unique pages.
When to use:
- For web pages that don’t change depending on the user: home pages, landing pages, technical documentation, blog, etc.
Server-side Rendering (SSR)
Generates the full HTML for a page on server-side in response to each request and send the rendered HTML to the client. (React:
- Can handle dynamic routes on the fly.
- Rendered page will always be up-to-date.
- Avoids additional round-trips for data fetching and templating on the client.
- Generating pages on the server takes time, which can often result in a slower Time to First Byte (TTFB).
When to use:
- For pages / sections with user-specific (personalized), authentication-gated information, like profile pages or personalized dashboards.
- For user-generated content, like comments, that a user would expect to be live immediately after posting.
Client-side Rendering (CSR)
Render on client-side (browser) at run time; all logic, data fetching, templating and routing are handled on the client rather than the server. Example: create-react-app.
- May update part of the content without full page re-render.
- May be easier and cheaper to host.
- Could be slow to start.
- Bad for SEO.
When to use:
- Single Page App.
- If your application is only available to authenticated users.
Deferred Static Generation (DSG)
An option in between SSG and SSR: statically generate critical pages at build time, and defer non-critical page generation until a user requests it.
Pros: reduce build and deploy time, while keeping the critical pages readily available.
Use case: larger sites that have lots of infrequently accessed content, like old blog posts.
Static Rendering vs Prerendering
- Static Rendering: pages are interactive without the need to execute much client-side JS
- Prerendering: improves the First Paint or First Contentful Paint of a Single Page Application that must be booted on the client in order for pages to be truly interactive.
Combining SSR and CSR via rehydration.