什么是 ssr (Server Side Rendering)

服务器端渲染，顾名思义是将渲染的工作放在 Server 端进行。而与之对应的是 CSR ，客户端渲染，也就是目前 Web 应用中主流的渲染模式，一般由 Server 端返回的初始 HTML 页面，然后再由 JS 去异步加载数据，然后完成页面的渲染。

基础概念

数据：来源于数据库、服务器。通过一定的方式取得并存储或传输。
模板：页面的基本轮廓、大体的画出页面的基础结构。
页面：模板+数据进行渲染的结果。
服务器端渲染：渲染过程在服务器端，渲染的最终结果（HTML 页面）通过 HTTP 请求发送的页面中，客户端接收的是完整的 HTML，前端不会看到模板与数据结构。
客户端渲染：服务器端将模板与数据发送到前端，客户端进行渲染。

使用 ssr 的原因

网络链路：省去了客户端二次请求数据的网络传输开销服务端的网络环境要优于客户端，内部服务器之间通信路径也更短。
内容呈现：首屏加载时间更快浏览器内容解析优化机制能够发挥作用。
便于 SEO：搜索引擎优化 SEO 是一种通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名。

同构渲染

什么是单页面应用（Single Page Application）

通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法使应用程序更像一个桌面应用程序。优势：前后端职责分离，架构清晰：前端进行交互逻辑，后端负责数据处理。

什么是同构渲染

传统 jsp、php、django 这些服务端渲染框架都是返回 HTML 字符串，所以就会造成切换页面的时候重新刷新了，用户体验比较差。而现在流行的前端开发模式都是 SPA，这些都是无刷新切换页面带来更好的用户体验。所以同构渲染不仅支持服务端渲染，还支持 SPA。常用的是对首页进行服务端渲染，其他页面依然保持 SPA 的无刷新访问模式。常见的有知乎、思否这种论坛。

对比客户端渲染、传统服务器端渲染、同构渲染

类型	特点	优点	缺点	技术栈
传统服务端渲染	渲染过程在服务器端，客户端接收的是完整的 HTML	容易 SEO，首屏加载快。	耗费后端资源。费流量，即使局部页面的变化也需要重新发送整个页面	文档模版，比如 ASP, JSP 等传统文档模板
客户端渲染（CSR）	服务器端将模板与数据发送到前端，客户端进行渲染。	节省后端资源，局部刷新页面，多端渲染，前后端分离。	首屏性能差，白屏，无法（或很难）进行 SEO。	React 、Vue、Angualr
同构渲染	首次访问时（访问首屏页面时），使用同构渲染技术，会先使用服务器端渲染，返回已经渲染完成的最终 HTML 页面。同时解决了首屏白屏问题以及 SEO 问题。此后进行交互时，则使用客户端渲染。	前两点这的优点之和。	对人员要求较高，需要掌握较多知识点。性价比太低，写起来虽然是同样技术但是放两个地方，割裂感强。	React 、Vue、Angualr 、Node

示例网站

csr：暂无（前端开发的后端管理系统网页）。
传统 ssr: 中国电信
ssr: 知乎官网

SSR 技术选型

框架	特点
Next	React 框架，允许使用 React 构建 SSR 和静态 Web 应用
Nuxt	Vue 的通用应用框架，预设了利用 Vue 开发服务端渲染的应用所需要的各种配置，主要关注的是应用的 UI 渲染
Egg + React + SSR	基于 React 和 Eggjs 框架
SSR	此框架脱胎于 egg-react-ssr 项目和 ssr v4.3 版本（midway-faas + react ssr）,支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 Serverless 方式部署或是以传统 Node.js 的应用形式部署。

最终选择试水 SSR，因为才学 Nest，SSR 框架可以用 Nest+react 这样搭配。

SSR 编写注意点

注意服务器端与客户端之间的区别，不要再首屏渲染时访问客户端才有的 API（history，window 等）。
因为做的事首屏渲染，注意不要让关键信息被隐藏（react 的{aaa&dom}这样且的写法，可能就导致一开始传过来的事部分 dom 未被渲染）。

未完待续。