Day 32 of #100DaysOfCode: The difference between CSR, SSR, Pre-rendering, and Static SSR
Published: 2020-08-16 12:59:40

## 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](https://developers.google.com/web/updates/2019/02/rendering-on-the-web). I recommend you read [Google's blog](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) 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?
1. The server no longer has to generate and render full HTML for each request
2. Reduce the loading for the server-side 

### Downsides
1. The amount of JavaScript required tends to grow as an application grows. (low TTI for the first page)
2. Poor SEO
3. Difficult to get and keep fast for mobile devices.

### Ways to improve performance:
1. [Aggressive code-splitting](https://web.dev/reduce-javascript-payloads-with-code-splitting/)
2. Pre-rendering
3. PRPL pattern
  * [Preload the late-discovered resources](https://medium.com/a-layman/how-browser-works-when-rendering-a-web-page-f49c09bec475#3074)
  * Render the initial route as soon as possible
  * Pre-cache remaining assets (e.g., [service worker](https://medium.com/a-layman/turn-the-next-js-website-to-pwa-with-workbox-part-1-web-app-manifest-and-caching-offline-support-e6d94330b8f2))
  * [Lazy load other routes and non-critical assets](https://medium.com/a-layman/explain-images-lazy-loading-with-intersectionobserver-with-react-hooks-in-short-733e05b610dd)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4td3w8zfqjk96g53n1p.png)

* Reference: [Google's blog](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)

## 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)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jcaqa1xt4sdd1un5pogq.png)

* Reference: [Google's blog](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)

## 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kcpqy6h78h8qlhzwn5f5.png)

* Reference: [Google's blog](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)

## 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](https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering)
1. Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
2. Server-side Rendering: The HTML is generated on each request.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fp6bgekzejzafqitvgup.png)

* Reference: [Google's blog](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)

## 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 `flickering` issue)

* Non-destructive hydration: instead of destroying, the DOM tree will be leveraged on the client side

### How non-destructive hydration works?
1. The server generates the initial HTML (SSR)
2. 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
4. The JavaScript bundles executes when it's downloaded
5. 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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6xx8ig9mi4tlxniycw2.png)

* Reference: [Google's blog](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)

## Summary
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eo38h9eqhbjnj9edj32t.jpg)

## 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/

## References
* [Next.js 9.3](https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support)
* [Client-side vs. Server-side vs. Pre-rendering for Web Apps](https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering)
* [React | 用實作了解 Server-Side Rendering 的運作原理](https://medium.com/starbugs/react-%E7%94%A8%E5%AF%A6%E4%BD%9C%E4%BA%86%E8%A7%A3-server-side-rendering-%E7%9A%84%E9%81%8B%E4%BD%9C%E5%8E%9F%E7%90%86-c6133d9fb30d)
* [The Benefits of Server Side Rendering Over Client Side Rendering](https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8)
* [一看就懂的 React Server Rendering（Isomorphic JavaScript）入門教學](https://blog.techbridge.cc/2016/08/27/react-redux-immutablejs-node-server-isomorphic-tutorial/)
* [[React] SSR 筆記](https://pjchender.github.io/2018/09/21/react-ssr-%E7%AD%86%E8%A8%98/)
* [Apply instant loading with the PRPL pattern](https://web.dev/articles/apply-instant-loading-with-prpl)