Introduction
This topic is a quick note for understand the difference between CSR, SSR, Pre-rendering, and Static SSR.
Most of the definitions in this topic refer to Google's blog. I recommend you read Google's blog directly for details.
Terminology
- TTFB: Time to First Byte - seen as the time between clicking a link and the first bit of content coming in.
- FCP: First Contentful Paint - the time when requested content (article body, etc) becomes visible.
- TTI: Time To Interactive - the time at which a page becomes interactive (events wired up, etc).
Full Client-Side Rendering (CSR)
Client-side rendering (CSR) means rendering pages directly in the browser using JavaScript. All logic, data fetching, templating and routing are handled on the client rather than the server.
Definition
- The server renders HTML without data and the page is allowed users to interact with it when JavaScript execute completely
Why do we need CSR?
- The server no longer has to generate and render full HTML for each request
- Reduce the loading for the server-side
Downsides
- The amount of JavaScript required tends to grow as an application grows. (low TTI for the first page)
- Poor SEO
- Difficult to get and keep fast for mobile devices.
Ways to improve performance:
- Aggressive code-splitting
- Pre-rendering
- PRPL pattern
- Preload the late-discovered resources
- Render the initial route as soon as possible
- Pre-cache remaining assets (e.g., service worker)
- Lazy load other routes and non-critical assets
- Reference: Google's blog
Server-Side Rendering (SSR)
Server rendering generates the full HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client, since it’s handled before the browser gets a response.
Definition
- The server renders full HTML
Benefits
- Fast TTI (Time To Interaction)
- Fast FCP (First Contentful Paint)
- Better SEO
Downsides
- The server has to generate pages on the fly
- Slower TTFB (Time to First Byte)
- Reference: Google's blog
Static SSR
Unlike Server Rendering, it also manages to achieve a consistently fast Time To First Byte, since the HTML for a page doesn’t have to be generated on the fly. Generally, static rendering means producing a separate HTML file for each URL ahead of time.
Definition
- The server produced full HTML at the run-time
- Fast TTFB (Time to First Byte)
Downsides
- Every possible URLs must be generated
- Reference: Google's blog
CSR with Pre-rendering
It’s important to understand the difference between static rendering and prerendering: static rendered pages are interactive without the need to execute much client-side JS, whereas 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.
Implementations
Next.js
Next.js provides two kinds of ways for pre-rendering
- Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
- Server-side Rendering: The HTML is generated on each request.
- Reference: Google's blog
Hydration (Trade-off between SSR and CSR)
This approach attempts to smooth over the trade-offs between client-side rendering and server-side rendering by doing both. Navigation requests like full page loads or reloads are handled by a server that renders the application to HTML, then the JavaScript and data used for rendering is embedded into the resulting document.
There are two types of hydrations.
Destructive hydration: destroy the DOM tree and reload it when rendering on the browser (has
flickeringissue)Non-destructive hydration: instead of destroying, the DOM tree will be leveraged on the client side
How non-destructive hydration works?
- The server generates the initial HTML (SSR)
- The client recieves the initial HTML (in this stage, the user still can't interact to the web page) 3.The client downloads the JavaScript bundles
- The JavaScript bundles executes when it's downloaded
- Hydration: the JavaScript will leveraged the web page (in this stage, the user can interact to the web page)
Benefits
- Fast FCP (First Contentful Paint)
- Better SEO
Downsides
- Negative impact on TBT (Total Block Time): the web page can't respond to input until the client-side scripts for components are executed
- Reference: Google's blog
Summary
Articles
There are some of my articles. Feel free to check if you like!
- My blog-posts for software developing: https://medium.com/a-layman
- My web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
- My latest side project - Daily Learning: https://daily-learning.herokuapp.com/
Top comments (0)