【前端】到底什么是 SSR ？

都2021年了，前端 SSR 这个概念其实已经被人说烂了。

没有使用过 SSR 做过业务的前端都显得格格不入。

广义上的 SSR

广义的 SSR 指的就是服务端渲染。

凡是通过服务端渲染出完整的数据页面，而不是页面骨架的都属于 SSR 渲染。

后端常用的模板引擎方式渲染的页面就属于这个范畴。

现代前端的 SSR

现代前端的的 SSR 通常指的是同构前端应用。

编写页面 和 后端数据的获取和填充都由 JavaScript 来完成。

SSR 应用和 SPA 应用只有特别细微的差别 , 切换到 SSR 渲染的成本也很低。

开发方式还是通过前后端分离的形式，只是注入数据这个步骤不需要后端的参与，直接通过 SSR 框架的特殊 function 来向生成页面的这个过程注入需要的数据。

SSR 渲染的原理

本质上是服务端输出浏览器能运行的完整的 HTML 文本。

现代 SSR 的基本原理也和 SSR 本质差不了太多。

在本质的基础上增加了静态资源分割加载、状态注入。

大多数前端 SSR 框架编译代码，都会生成页面对应的静态 js 代码, 并且生成一个资源映射文件在服务端。

页面在服务端渲染时，会从资源映射文件里取出匹配的资源路径，注入到 head 上加载。

服务端用 数据 渲染好完整的 HTML 输出到浏览器时，也会把 数据 用全局变量的形式注入到页面上。

为什么要这样做？

很简单，现代的 SSR 都是使用数据进行驱动页面渲染。如果没有初始数据，无法对页面进行重新渲染。