## 一、概述 ### **CSR** CSR是Client Side Render简称；页面上的内容是我们加载的js文件渲染出来的，js文件运行在客户端浏览器上面； ### **SSR** 服务端渲染（Server-Side Rendering），是指由**服务侧**完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程； ## 二、SSR vs CSR CSR和SSR最大的区别在于前者的页面渲染是JS负责进行的，而后者是服务器端直接返回HTML让浏览器直接渲染； 现在的前端技术，大量使用的是JS在客户端渲染； ### **传统CSR的弊端** * 由于页面显示过程要进行JS文件拉取和前端框架代码执行，首屏加载时间会比较慢。 * 对于SEO(Search Engine Optimazition,即搜索引擎优化)，完全无能为力，因为搜索引擎爬虫只认识html结构的内容，而不能识别JS代码内容； SSR的出现，就是为了解决这些传统CSR的弊端； ### **SSR的弊端** * 多维护一个服务层：需要一个node server（express，koa...），这就不可避免地加大了性能、运维等挑战； * 代码兼容性：浏览器里的好多代码在SSR过程中是会报错的，所以你得花很多精力去处理其中的兼容性； * 技术限制：虽然现在Vue、React 等流行框架都出台了相应的SSR解决方案，但如果自行实现，技术上要求不低； >[danger] SSR很有用不错，但也不可避免地加大了很多开发和维护的成本，对于不是大神级别的前端工程师和小公司来说是很大的挑战；