Take you in-depth understanding of common rendering modes such as CSR, SSR, SSG, etc.

foreword

Recent work involves CSR, SSR, SSG, and this paper aims to summarize and generalize these rendering modes.

SPA, MPA, SSRand CSRThese words may appear frequently in your working life, and there are many related articles on the Internet. If you feel vague or completely clueless about these concepts, I hope this article will help you understand these rendering modes.

SPA and MPA

MPA

MPA ( multiple page application) is called a multi-page application , which refers to an application with multiple pages. From a technical point of view, you can roughly understand it.

• The first screen is fast : each page is independent of each other, and multiple html pages need to be maintained separately, and each request returns html directly.
• Switching pages is slow : native browser-based document jump ( navigating across documents). Therefore, every page update is a page reload, which will bring huge restart performance consumption.
• Friendly to SEO : At the beginning of the page, it has all the page content instead of "stateless", so as to achieve better indexing effect.

SPA

SPA ( single page application) is called Single Page Application . Use js to perceive the change of url, dynamically clear the content of the current page, and then mount the content of the next page to the current page. At this time, the routing is not done by the backend, but by the frontend, which dynamically displays the required components.

• Fast page switching speed : routing jumps are based on specific implementations (such as vue-router, react-router and other front-end routing), rather than native browser document jumps, avoiding unnecessary reloading of the entire page.
• Separation of front-end and back-end : Based on front-end routing, SPA is decoupled from the application back-end, so that the front-end no longer depends on the routing distribution of the back-end.
• The first screen time is slow : In addition to HTML, the first screen needs to additionally request and execute js files, and render the first screen on an empty page through js.
• SEO is not friendly : the content is generated by js rendering, but the search engine does not recognize this part of the content, resulting in poor SEO effect

CSR（Client Side Rendering）

CSR (Client Rendering) is a rendering method that executes JavaScript on the browser to generate the DOM and display the content. CSR is closer to modern front-end development. The Vue and React we usually use use CSR by default. The general process is as follows:

1. The browser requests html and js from the front-end server
2. The html page is empty, the initial loading does not display any content, and the content is rendered by executing js
3. Interact through the API exposed by the backend

For a typical CSR application, the browser only receives an HTML page used as the application container, so it is also called a single-page application, so the characteristics of CSR are similar to the SPA mentioned earlier.

SSR（Server Side Rendering）

concept

In the early days, developers liked to build applications using JSP or other template rendering engines, an approach known as SSR (Server Side Rendering). Unlike client-side rendering, SSR outputs rendered complete HTML, and the entire rendering process takes place on the server side.

After the user initiates a request, the SSR process is roughly as follows:

1. The backend service queries the content required by the user through the data layer
2. Handle business logic
3. Stitch pages using templates
4. Return the rendered HTML string to the client
5. Front-end rendering and loading JS scripts to complete the rest of the interaction

早期的 SSR 在内容更新/跳转，都需要再次请求服务器，重新加载一次页面。但在 React, Vue 等框架的加持下，我们语境中的 SSR 一般指的是首屏服务端渲染或同构渲染（Isomorphic render），即新开页面访问 SSR 应用时，首屏会返回完整的 html，浏览器通过注水（hydrate）成为 React 或 Vue 应用，后续用户进行跳转等操作时不会再向服务端请求 html，而是以类似单页应用的方式进行。

同构直出

上文中，我们提到了hydrate这个词，正是通过该操作使静态 html 页面转换成一个 Vue 或 React 应用，这依赖于 React 和 Vue 提供的「同构直出」功能。

在服务端渲染中，有两种页面渲染的方式：

• 后端服务器获取数据并组装 HTML 返回给浏览器解析渲染页面
• 浏览器在交互过程中，请求新的数据并动态更新渲染页面

这两种渲染方式的不同点在于运行环境的不同。同一份代码可以在客户端和服务器端运行，两个环境的渲染结果应该保持一致。因此，我们需要实现客户端和服务器端的路由、页面模板和数据共享。

我们通过webpack将打包出两份代码，一份在服务端运行。

整体流程

以 Nuxt 为例，整体的渲染流程如下所示：

两个重要的概念

脱水（dehydrate）

将组件树序列化成静态的 HTML 片段，能直接看到初始视图，不过已经无法与之交互了，但这种便携的形态尤其适合网络传输。这个脱去动态数据，成为风干标本一样的静态快照的过程被称为脱水（dehydrate）。

注水（hydrate）

与脱水相反，将这个 html 躯干复活为 Vue 应用的过程称为注水。客户端并不重新生成 HTML 组件，而是重用服务器发送给它的 HTML，并附加「数据」与「交互性」，构建成完整的 Vue 应用，这个过程被称为注水（hydrate）。

Hydration is a process where a frontend framework like React, VueJS re-uses the static HTML structure it receives from the server (that was created at server-side at build time), and instead of re-generating the HTML nodes on the browser, simply “breathes” event handlers and interactivity into it.

SSR 与 CSR 的对比

优点

• SEO 友好：搜索引擎爬虫可以直接抓取到最终页面内容。而 CSR 直接返回的 html 为空壳，对一些不加载执行 js 的低级爬虫来说这个页面的内容就是空的。
• 首屏时间更短：服务端渲染直接返回带有数据的 HTML 文本，浏览器只需解析 HTML 并构建 DOM 树，无需额外执行 JS 来渲染首屏元素。

缺点

• 占用服务器资源：渲染工作从浏览器转移到服务器，新增了数据获取的 IO 和渲染 HTML 的 CPU 占用。
• 代码复杂度增加：需要同时兼容客户端和服务器端，代码编写时需要考虑两端的执行环境，且某些依赖库只能在客户端运行，增加了编码的复杂性。

SSG（Static Site Generation）

概念

SSG（静态站点生成）与 SSR 的原理非常类似，但不同之处在于 HTML 文件是预先生成的，而不是在服务器实时生成。

工作流程

1. 构建阶段：在构建过程中，SSG 将源文件和模板（如HTML、CSS）结合，生成静态页面。这些页面通常由预定义的布局、组件和样式组成。
2. 预渲染：SSG 在构建过程中会自动执行预渲染。这意味着 SSG 会根据预定义的路由和数据源，在构建时生成静态页面的多个实例。例如，对于一个博客，每篇文章都可以在构建过程中生成一个独立的静态页面。
3. 静态输出：一旦构建完成，SSG 将生成的静态页面输出到目标文件夹中。这些页面包含所有必要的 HTML、CSS 和 JavaScript，以及任何相关的静态资源（如图像、视频等）。
4. 部署：生成的静态页面可以直接部署到任何支持静态文件的Web服务器上。因为这些页面不需要动态生成，所以它们可以被高效地缓存和交付给访问者，提供更好的性能和可扩展性。
5. 用户访问：首屏直接解析 html 生成 dom。接着和 SSR 一样通过 hydrate 将整个应用转变成为 React 或 Vue 应用，使用户在交互时与单页应用无异。

特点

SSG 的优缺点都非常明显，通常适用于静态页面，例如文档、博客、帮助站点和电子商务产品。

优点

• 性能高：相比 SSR 减轻了服务器压力，还可以将生成的静态资源放到 CDN 上，充分利用缓存。
• SEO 友好：搜索引擎爬虫可以直接抓取到最终页面内容
• 易于部署：生成的静态页面可以直接部署到任何支持静态文件的 Web 服务器上，无需依赖 Node 环境等。
• 高度安全性：由于服务器不需要运行程序，因此服务器漏洞仅限于操作系统本身，维护也更加方便。

缺点

• 静态：只适用于静态数据，对于经常改动的数据，需要每次重新生成页面。

ISR（Incremental Static Regeneration）

概念

ISR（增量式网站渲染）结合了 SSG 和 SSR 的优势。ISR 的核心思想是将部分静态页面在构建时生成，并在用户访问时进行增量更新。

在 ISR 中，静态页面的构建仍然是在构建时完成的，类似于 SSG。然而，与完全静态的 SSG 不同，ISR 允许某些页面在构建后仍保持动态，并在用户首次访问时进行渲染。一旦渲染完成，生成的静态页面被缓存，并在后续的请求中被直接提供，以提高性能和响应速度。

工作流程

1. 构建阶段：在构建过程中，使用SSG（静态站点生成器）生成静态页面，并将这些页面上传到 CDN。
2. 用户发起页面请求：
   • 请求静态页面： CDN 直接返回；
   • 请求 ISR 页面，且该页面未被 CDN 缓存：直接响应 fallback 页面，浏览器接收到该页面后以 CSR 的形式渲染出内容；同时 CDN 会将请求转发到服务端，触发服务端渲染，服务器动态地生成页面内容，并返回给 CDN 进行缓存
   • 请求 ISR 页面，该页面 CDN 已有缓存且未过期：直接返回缓存的 html 页面
   • 请求 ISR 页面，该页面 CDN 已有缓存但已经过期：直接返回这份过期的缓存给浏览器，此时用户看到的是缓存已经过期的页面；同时 CDN 会将请求转发到服务端，触发服务端渲染，服务器动态地生成页面内容，并返回给 CDN 将该页面的缓存更新

特点

优点

The advantage of ISR is that it finds a balance between static and dynamic. For infrequently changing content, SSG can be used to generate completely static pages to achieve fast loading and low server load. For parts that may need to be updated frequently, such as comment areas or real-time data, ISR can use SSR to dynamically generate these contents, and perform incremental updates in subsequent requests, so as to maintain the real-time performance of the page.

shortcoming

• Access to secondary content that has not been pre-rendered triggers a fallback, requires CSR, and loads slowly.
• Visiting a page that has been pre-rendered before but has expired and has not been updated will result in an expired cached response. Users need to refresh once to see new data.

Application Scenario

In essence, ISR is still the scope of SSG, and complex scenarios still cannot be dealt with. Its typical application scenarios include blog comments, latest article lists, etc. By combining this dynamic content with static pages, it is possible to provide a richer and real-time user experience while maintaining high performance and security.