CSR是什么？

CSR全称是Client Side Rendering，翻译过来的意思是客户端渲染。顾名思义，就是在网页的渲染工作在客户端（浏览器）进行，而不是在服务器端进行。举个例子，我们平时常用的vue，react等框架开发的项目就是在客户端进行渲染的，，它们都是先下载html文档框架然后再向后端请求数据（仅仅是HTML不包含数据），然后下载js来执行渲染出页面结果，后端并不参与网页的渲染，只提供数据。

客户端渲染的优缺点

优点

1. 前后端分离。前端专注于界面开发，后端专注于api接口的开发，各司其职开发效率更高，前后端代码分开耦合度更低，也更利于维护。
2. 服务器压力变轻了，渲染工作在客户端进行，服务器直接返回未加工的HTML。
3. 用户在首屏加载完成后用户在后续的页面切换速度很快。

缺点

1. 不利于SEO，因为搜索引擎不执行JS相关操作，无法获取网站数据进行关键字匹配。
2. 所有资源均需在客户端加载，所以首屏渲染时间比较长，白屏时间过长。

SSR是什么

SSR全称是 Server Side Rendering，翻译过来的意思是服务端渲染。与客户端渲染不同的是，在SSR模式中服务器返回的是一个渲染完成的HTML，整个渲染过程是在服务器端进行的。例如传统的JSP，PHP都是服务端渲染。

服务端渲染的优缺点

优点

1. 有利于SEO，由于页面在服务器生成，搜索引擎可以直接抓取到最终页面的数据，进行关键字匹配。
2. 有利于首屏渲染，html所需要的数据都在服务器处理好，直接生成渲染后的html，首屏渲染时间变短。

缺点

1. 占用服务器资源，渲染工作都在服务端渲染，服务器的压力更大，对服务器的要求高。
2. 用户浏览体验不好，每次跳转到新页面都需要重新在服务端渲染整个页面。每次跳转都需要等待。

SSG是什么

SSG全称是 Static Site Generation ，翻译过来的意思是静态站点生成。是指在应用编译构建时预先渲染页面，并生成静态的 HTML。把生成的 HTML 静态资源部署到服务器后，浏览器不仅首次能请求到带页面内容的 HTML ，而且不需要服务器实时渲染和响应，大大节约了服务器运维成本和资源。

静态站点生成的优缺点

优点

1. 减轻服务器压力，可以把生成的静态资源（html）放到CDN上，合理利用缓存
2. 有利于SEO，由于html已经提前生成好，不需要服务端和客户端去渲染

缺点

1. 只适用于静态数据，对于经常改动的数据，需要每次重新生成页面。
2. 用户体验不好，每次打开新页面都需要重新渲染整个页面，不能只渲染部分区域。

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情