CSR、SSR、SSG、NSR、ESR、ISR 都是啥？

发布于 2023-12-07 01:55:55 字数 4822 浏览 64 评论 0

根据不同的构建、渲染过程有不同的优劣势和适用情况。

现代 UI 库加持下常用的 CSR 、
具有更好 SEO 效果的 SSR ( SPR )、
转换思路主打构建时生成的 SSG 、
大架构视野之上的 ISR 、 DPR ，
还有更少听到的 NSR 、 ESR 。

CSR（Client Side Rendering）

页面托管服务器只需要对页面的访问请求响应一个如下的空页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- metas -->
    <title></title>
    <link rel="shortcut icon" href="xxx.png" />
    <link rel="stylesheet" href="xxx.css" />
  </head>
  <body>
    <div><!-- page content --></div>
    <script src="xxx/filterXss.min.js"></script>
    <script src="xxx/x.chunk.js"></script>
    <script src="xxx/main.chunk.js"></script>
  </body>
</html>

页面中留出一个用于填充渲染内容的视图节点 ( div#root )，并插入指向项目编译压缩后的

JS Bundle 文件的 script 节点
指向 CSS 文件的 link.stylesheet 节点等。

浏览器接收到这样的文档响应之后，会根据文档内的链接加载脚本与样式资源，并完成以下几方面主要工作：

执行脚本
进行网络访问以获取在线数据
使用 DOM API 更新页面结构
绑定交互事件
注入样式

以此完成整个渲染过程。

CSR 模式有以下几方面优点：

UI 库支持
前后端分离
服务器负担轻

SSR (Server Side Rendering)

SSR 的概念，即与 CSR 相对地，在服务端完成大部分渲染工作，服务器在响应站点访问请求的时候，就已经渲染好可供呈现的页面。

像 React 、 Vue 这样的 UI 生态巨头，其实都有一个关键的 Virtual DOM (or VDOM) 概念,先自己建模处理视图表现与更新、再批量调 DOM API 完成视图渲染更新。这就带来了一种 SSR 方案：

VDOM 是自建模型，是一种抽象的嵌套数据结构，也就可以在 Node 环境（或者说一切服务端环境）下跑起来，把原来的视图代码拿来在服务端跑，通过 VDOM 维护，再在最后拼接好字符串作为页面响应，生成文档作为响应页面，此时的页面内容已经基本生成完毕，把逻辑代码、样式代码附上，则可以实现完整的、可呈现页面的响应。

SSR 优点

呈现速度和用户体验佳
SEO 友好

SSR 缺点

引入成本高
- 将视图渲染的工作交给了服务器做，引入了新的概念和技术栈（如 Node）
响应时间长
- SSR 在完成访问响应的时候需要做更多的计算和生成工作
- 关键指标 TTFB ( Time To First Byte ) 将变得更大
首屏交互不佳
- 虽然 SSR 可以让页面请求响应后更快在浏览器上渲染出来
- 但在首帧出现，需要客户端加载激活的逻辑代码（如事件绑定）还没有初始化完毕的时候，其实是不可交互的状态

SSR-React 原理

VDOM
同构
双端对比

几大概念：

VDOM
同构
双端对比
renderToString()
renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

仅仅是为了将组件渲染为 html 字符串，不会带有 data-react-checksum 属性

SPR (Serverless Pre-Rendering)

无服务预渲染，这是 Serverless 话题之下的一项渲染技术。 SPR 是指在 SSR 架构下通过预渲染与缓存能力，将部分页面转化为静态页面，以避免其在服务器接收到请求的时候频繁被渲染的能力，同时一些框架还支持设置静态资源过期时间，以确保这部分“静态页面”也能有一定的即时性。