全栈大前端

# 简介

服务端渲染（Server Side Renderinig，SSR）是一项可以在服务端预先生成页面的 DOM 结构（而不是在浏览器端生成）的技术。

# 优点

  • SEO，对搜索引擎友好

  • 首屏加载快

因此 SSR 适合于重页面内容而非交互的页面，比如新闻站点和大型活动页面等。SSR 对这些项目的用户体验有极大的提升。

# 缺点

  • 维护成本增加

  • 服务器成本提

  • 单服务器能承受的 QPS 降低

  • 技术复杂度提高

# 几种渲染方式

# CSR

  • 客户端渲染（Client Side Rendering）

# SSR

  • 服务端渲染（Server Side Rendering）

是指将单页应用（SPA）在服务器端渲染成 HTML 片段，发送到浏览器，然后交由浏览器为其绑定状态与事件，成为完全可交互页面的过程。（PS：本文中的 SSR 内容都是围绕同构应用来讲的）

服务端只负责首次“渲染”（真正意义上，只有浏览器才能渲染页面，服务端其实是生成 HTML 内容），然后返回给客户端，客户端接管页面交互（事件绑定等逻辑），之后客户端路由切换时，直接通过 JS 代码来显示对应的内容，不再需要服务端渲染（只有页面刷新时会需要）

# ESR

后面随着边缘计算的发展，由于CDN节点距离用户更近，有更短网络延时的优势，我们可以将页面进行动静拆分，将静态内容缓存在CDN先快速返回给用户，然后在CDN节点上发起动态内容的请求，之后将动态内容与静态部分以流的形式进行拼接，从而进一步提高了用户的首屏加载时间，尤其在边缘地区或者弱网环境也有能拥有很好的用户体验，此外还减少原先SSR服务器压力。

  • 原理和优势

刚才也提到了，ESR就是借助边缘计算能力，将返回的内容进行静态+动态部分拆分并以流的形式返回。静态部分依托CDN的缓存能力，优先返回给用户，随后在CDN节点上继续发起动态数据请求，并拼接在静态部分之后，继续流式返回。因此，其优势也是显而易见：

  1. TTFB(Time To First Byte)很短：因为静态内容在CDN缓存住了，会很快的返回给用户。
  2. FP(First Paint)很短：因为在静态内容返回后，已经可以开始HTML的解析以及 JS, CSS的下载和执行。
  3. FMP(First Meaningful Paint)很短：因为动态内容的请求是在CDN发起，相比于客户端与服务端直连，请求减少了TCP建连和网络传输开销，而且由于动态部分是以chunked形式流式返回，FMP就会很短，比如搜索网站的第一个搜索结果就会首先绘制出来。

# SSG

  • 静态页面生成（Static Stie Generation）

解决白屏问题、SEO问题。但无法生成用户相关内容（所以用户请求的结果都相同）。请求发生的过程中直接生成静态的HTML文件。（缺点以生成的文件难以达到自动更新，往往设置时间戳或者定时清理文件）

# 同构

所谓同构，通俗的讲，就是一套 React 代码在服务器上运行一遍，到达浏览器又运行一遍。 服务端渲染完成页面结构，客户端渲染绑定事件。它是在 SPA 的基础上，利用服务端渲染直出首屏，解决了单页面应用首屏渲染慢的问题

要实现同构，简单来说就是以下两步：

  • 服务端要能运行 React 代码；
  • 浏览器同样运行 React 代码。

# 推荐阅读

Next.js官方文档 (opens new window)

边缘渲染提速 (opens new window)

← SSR优化 →