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

Server-Side Rendering, aka classic or traditional SSR, is the process of rendering the complete HTML page on the server in response to a request and returning it to the client.

  • aka Multi-Page Applications (MPAs)

2. How does Server-Side Rendering (SSR) work?

How does Server-Side Rendering work?
  1. first the client sends a GET request to the server
  2. then the server gets any data it needs from a database or the cloud
  3. combines the HTML template and data to render a complete HTML page
  4. sends the complete HTML page back to the client
  5. finally, the client follows the Critical Rendering Path (CRP) to paint the page

3. What are the Pros and Cons of Server-Side Rendering (SSR)?

Pros

  • faster First Contentful Paint (FCP) and Time To Interactive (TTI)
  • SEO enabled optimized, since not all bots support JavaScript
  • additional budget for client-side JavaScript
  • client computation and bandwidth offloaded to the server

Cons

  • full page reloads required for some interactions
  • slow Time To First Byte (TTFB), since all processing takes place on the server, response may be delayed by:
    • multiple simultaneous users causing excess load on the server
    • slow network
    • server code not optimized

4. When should you use Server-Side Rendering (SSR)?

  • when initial load times are more important than subsequent ones (e.g. storefront)
  • when JavaScript and heavy interactivity is not required on the client (e.g. content website)
  • when client-side routing is not required
  • when you want to offload computation and bandwidth from the client to the server

Perfect for Storefronts and Content Websites


Resources

Server-side Rendering
Generate HTML to be rendered on the server in response to a user request
Server-Side Rendering | JavaScript Patterns
Website created for the FrontendMasters course on JavaScript Patterns by Lydia Hallie
Critical rendering path - Web performance | MDN
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model…
Patterns for Building JavaScript Websites in 2022
Deciding on the approaches and tools to use to build on web these days can be a challenging prospect.…
Application Holotypes: A Guide to Architecture Decisions - JASON Format

https://frontend-digest.com/client-side-rendering-vs-server-side-rendering-vs-static-site-generation-2a0702cbb08d