客户端渲染，服务端渲染，预渲染--区别/详解

原文网址：客户端渲染，服务端渲染，预渲染--区别/详解_IT利刃出鞘的博客-CSDN博客

简介

        本文介绍几大渲染技术，包括：客户端渲染，服务端渲染，预渲染。

        内容包括：介绍、优点、缺点、适用场景。

客户端渲染(CSR)

简介

        客户端渲染，英文是：Client-side rendering（CSR）。

        客户端渲染又称为前端渲染，起源于JS的兴起，ajax让前端渲染更加成熟。

        在客户端渲染中，前端专注于ui，后端专注于逻辑，真正意义上实现了前后端分离。前后端通过约定好的API来交互，后端提供数据，前端根据数据生成DOM插入HTML页面。性能消耗在客户端。

        对于传统的SPA（单页应用）来说，如果不进行一些额外的工作，那么它默认就是采用客户端渲染。

优点

1. 减少服务器压力
2. 首次加载完之后，页面响应速度快。
3. 可实现局部刷新，无需每次都请求完整的页面
4. 可进行各种组件复用、懒加载等。
5. 结构清晰，开发体验友好。
   1. 无需与服务端各项逻辑进行耦合

缺点

1. 首页速度慢，容易白屏
   1. 渲染前要下载一堆js和css文件
2. 不利于SEO
   1. 爬虫看不到完整的代码

适用场景

强交互、不注重SEO的页面。

例如：管理类的项目。

服务端渲染(SSR)

简介

        服务端渲染又称为后端渲染，英文是：Server-side rendering（SSR）。

        服务端渲染需要部署前端的服务端（Node.js）。

        服务端渲染的过程为：服务器端执行JS => 构建HTML页面（将HTML的符号（比如{{}}）用数据填充） => 输出HTML给浏览器。

优点

1. 用户看到完整页面的速度快
   1. 因为不需要客户端重新进行渲染，在服务端已经把当前页面渲染完毕了。
2. 利于SEO
   1. 爬虫在抓取我们页面内容的时候就已经能获取到一个渲染好的页面了，所以能轻松获取到网站的关键信息。
3. 节省客户端资源
   1. 不需要客户端进行渲染操作，对于移动端用户来说，耗电量减少。
4. 可以利用缓存机制
   1. 将一些页面进行缓存，可以进一步提高响应速度。
5. 数据实时性。
6. 无需关注浏览器兼容问题。

缺点

1. 服务器资源占用高
   1. 使用服务端渲染，其实也就是把本该在客户端渲染的工作转交给了服务端，这在大流量场景下必然会给服务器带来一定压力。
2. 开发成本提高
   1. 开发者需要考虑两端（客户端与Node的服务端）的兼容性。比如：在服务端是不存在DOM的。

适用场景

强交互、注重SEO的页面。

预渲染(Prerendering)

简介

        预渲染英文为Prerendering。

        预渲染不需要部署前端的服务端（Node.js）。

        预渲染：在构建时为了特定的路由生成特定的几个静态页面，等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件，直接以静态资源的形式输出给搜索引擎。

        预渲染不执行JS，只适用于纯静态页面。

        预渲染比较难加入交互机制，比如用户评价、提问，需要通过一些额外方式整合。

优点

1. 有利于SEO
   1. 对于搜索引擎爬虫来说（先排除高级爬虫），它不会等待你的JS执行完成之后才进行抓取，如果不进行预渲染，对于客户端渲染应用来说，HTML文件中几乎没有什么内容，故会影响你的搜索排名。采用预渲染就能保证在首次加载就能获取到相关的HTML内容，利于SEO。
2. 弱网环境体验好
   1. 可以解决首页白屏问题。
   2. 对于网络条件较差的用户来说，你的Bundle文件过大，会导致页面长时间白屏，这将使你白白流失很多用户。所以首次内容的快速呈现也是十分重要的。
3. 兼容浏览器差异
   1. 对于部分浏览器（点谁心里有数啊QAQ）来说，有些高级特性是不支持的，这个时候如果在执行JS的过程中异常将可能存在浏览器页面显示异常的情况，这个时候预渲染的能力也是能兼容这种情况的。

缺点

1. 更新页面的内容很困难
   1. 预渲染的构建是由打包工具在打包的时候就渲染出来了，所以如果不重新构建，那么用户所看到的预渲染页面永远都是一成不变的，即便你的页面数据早已更新，但是初次渲染的时候，浏览器展示的依旧是这套老旧的数据，如果想要看到最新的数据就需要等待JS下载完毕重新渲染的时候才能出现，从而是用户感觉很突兀的感觉。
2. 降低构建的速度
   1. 进行预渲染时，会拉长打包的总时间，使我们每次构建的速度大大降低

适用场景

适用场景：只需对少数网站进行SEO的网站。

例如：官网，营销页面（例如/,/about,/contact等）

其他网址

介绍 | 陌小路的个人博客

什么是服务端渲染、客户端渲染、SPA、预渲染 - 简书