同构渲染的概述

狐七 1/28/2022 SSR

# 什么是渲染?

我们这里所说的渲染指的是把（数据 + 模板）拼接到一起的这个事儿。

例如：
请求后端接口数据，然后将数据通过模板绑定语法绑定到页面中，最终呈现给用户。这个过程就是我们这里所指的渲染。

渲染本质其实就是字符串的解析替换，实现方式有很多种。

随着前端技术栈和工具链的迭代化成熟，前端工程化也成了当下的主流技术方案。还涌现了Augular、React和Vue等基于客户端渲染的前端框架。这些SPA单页面应用，具有用户体验好、开发效率高、渲染性能好等优点。但是也带来了一些缺陷：

首屏渲染时间长：与直接服务端渲染的html不同，单页应用从客户端生成html呈现网页内容，用户需要等到js解析执行完才能看到页面。这样就使得首屏时间变长从而影响用户体验。
不利于SEO：当搜索引擎爬取html网站的时候，单页的html是没有内容的，需要等到客户端js执行完才能生成网页内容，目前的搜索引擎对于这部分的抓取还不是很好。

为了解决这两个问题，前端借鉴了传统的服务端渲染方案，服务端请求网页，服务端查询页面需要的数据，将数据结合页面模板渲染成HTML，再返回给客户端。

当然不仅仅如此，为了获得更好的用户体验，同时会在客户端将来自服务端渲染的内容激活为一个 SPA 应用，也就是说之后的页面内容交互都是通过客户端渲染处理。

这种方式我们通常称之为现代化的服务端渲染，也叫同构渲染，所谓的同构指的就是 服务端构建渲染 + 客户端构建渲染。同理，这种方式构建的应用称之为服务端渲染应用或者是同构应用。