前端页面渲染的几种方式（CSR/SSG/SSR）

[Popxie]

前端页面渲染的几种方式（CSR、SSG、SSR）

客户端渲染 CSR (Croswer Side Render)

是在单页应用中使用最多的渲染方式，我们现在的项目常用使用了 react、vue 之类的单页应用的框架，这类框架在进行页面渲染时，会到首先对 html 页面进行解析并构建 dom 树，等 js 文件返回后、动态的改变 DOM 树的结构，使得页面成为希望成为的样子，从而完成页面的渲染，如下图所示

这种方式存在着搜索引擎不友好的特点，现在的爬虫主要分为低级爬虫和高级爬虫两种。

• 低级爬虫：只请求 URL，URL 返回的 HTML 是什么内容就爬什么内容。
• 高级爬虫：请求 URL，加载并执行 JavaScript 脚本渲染页面，爬 JavaScript 渲染后的内容。

这种方式的优缺点如下表：

优点	缺点
服务响应快	在 js 得到渲染之前，页面中并没有内容，会出现白屏
支持页面交互，适用于单页应用	页面渲染代码在 js 中，爬虫不能解读，对 SEO 不友好

静态页面生成 SSG (Static Site Generation)

用于静态页面的渲染方式，构建时生成完整的 html 页面，无需服务端请求处理，服务器响应快，非常快就可以看到展示的页面。

渲染流程如下图所示：
浏览器端向前端服务请求 html 资源，前端服务将已经打包好的，具有全部 dom 的 html 返回给浏览器端，进行解析、构建 dom 树等操作。

静态页面预渲染方式的优缺点如下：

优点	缺点
良好的 SEO	适合静态页面网站，不支持交互
html 已包括渲染的 dom，首屏加载速度快	构建过程中没有 window,document 等，存在库的兼容问题

SSG 相关文档

服务端渲染 SSR (Server Side Render):

服务端请求需要的数据后，将渲染 html 页面，返还给客户端，
同时进行脱水操作，将服务端请求的数据挂载 window 上，使得浏览器可以获取到后端的数据，无须再次服务端请求
浏览器根据返回 html，下载并执行相应的 js 文件，进行注水操作，浏览器得到数据后，将数据传递给组件，完成事件的绑定和页面的交互、最终得到可交互的页面

服务选渲染方式的优缺点如下：

优点	缺点
良好的 SEO	由于需要再服务端进行渲染，数据获取等处理，所以服务响应时间长
支持页面交互	服务端环境中没有 window,document 等，存在库的兼容问题

|需要对服务端进行维护，维护成本高。

在实现服务端/静态页面渲染时，可以采用实在上主流的一些框架，简化我们的开发流程，比如 NextJS，是一个支持 ssr，和 ssg 的 react 元框架，使用简单，在进行服务端渲染时，每一个组件都有一个 getServerSideProps()的方法，只需要将数据获取的处理逻辑写在该方法中，nextjs 就会自动调用，从而实现服务端的渲染。

阅读原文