什么是服务器端渲染

当前应用渲染模式

在前后端分离大规模应用之前，用户请求网页，都是后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的 html 页面，再直接返回给浏览器，以便用户浏览。

但由于近几年前后端分离的理念被大规模应用，前后端进行了拆分，并且单页应用得到了广泛应用（Angular、React、Vue 前端三大框架）。

前后端拆分核心理念

前后端拆分，后端专注于数据接口服务，前端专注接口调用，页面渲染，双剑合璧，相得益彰。

服务器端渲染的优势

1. 首屏加载快
   相比于加载单页应用，我只需要加载当前页面的内容，而不需要像 React 或者 Vue 一样加载全部的 js 文件（当然，单页应用文件加载过大的情况可以使用 code spliting 来解决）。
2. SEO 优化
   对于单页应用，搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来的页面（个人感觉是搜索引擎自己挖了个坑，然后全互联网跟着填坑）。

服务端渲染的劣势

1. 线上排错不方便
   如果数据请求是 ajax 来进行，出现的问题都能够很方便的通过浏览器的控制台来观察。但是如果是服务端渲染，如果一个后台拼接数据的过程中或者组件书写的过程中出了问题，必须到对应的服务器端（node，java 等）去查看线上日志，再分析 debug。
2. 职责混杂
   浏览器和服务器端职责混杂，服务器端在一定程度上还得做前端的页面绘制工作（以前写 html 页面，写完之后再转成 jsp，再在里面混写 java 代码调用数据）。

是否应该使用服务端渲染

1. 因为项目大，首屏加载慢
   针对于首屏加载，可以做服务端渲染。但要有觉悟，一旦这样做，后期维护是个很痛苦的事情。相比于做服务端渲染，更推荐通过应用拆分、code spliting 来完成优化首屏加载的过程（以前做过一次首屏优化，优化前首屏加载每次都在 5s+，code spliting 之后直接变成 2s+，性价比高）。
2. seo 优化
   如果是为了主页网站被搜索引擎收录，可以一定使用服务端渲染。但更好的建议新开引导项目，在该项目上静态资源或服务端渲染显示页面，作为主要网站的搜索引擎引流作用，域名是一样的情况下，用户搜索点击了之后最后再浏览什么，跳转什么还不都是由你说了算么（所在的创业公司为了提升搜索的排名，就是这么干的，效果自然还可以）。