在前端页面的渲染这块，近几年来感觉经历了从服务端渲染(多页面)=>客户端渲染(SPA)=>同构渲染的演变。

客户端渲染

在浏览器中通过 JS 直接进行页面的渲染路由跳转等操作，与后端的交互主要为 API 微服务接口的数据调用。得到数据后在前端进行分析处理和界面生成展现。比较代表性的为 React,Vue,Angular 三大前端框架的 SPA(Single Page Application) 应用。

优点

1. 天然的浏览器分布式环境
2. 组件复用度高，还可以通过懒加载等进行性能的进一步优化
3. 除首屏外性能响应快速
4. WEB/MOBILE 多端渲染
5. 前后端分离开发

缺点

1. 首屏性能差：由于页面渲染、三方包等逻辑都置于一个 JS 文件中，首屏加载会导致一定时间的白屏现象。
2. 浏览器 SEO：由于现阶段大多搜索引擎采用的爬虫算法是直接抓取页面代码分析，而 SPA 应用只有一个入口文件而没实质内容，SEO 性能差。

服务端渲染

后端不仅仅进行数据的获取处理操作，同时也负责页面的生成，最终传到客户端(浏览器)的是生成的包含数据的页面。客户端所需要做的仅仅是 html 页面的展现和之后的 DOM 事件处理。代表为传统的 JSP,PHP,ASP 应用。

优点

1. 优秀的 SEO
2. 首屏加载快

缺点

1. 负载大：由于渲染任务都交由服务端进行，在高并发的情况下，对于服务端负载压力大，同时丧失了浏览器端作为一个天然分布式系统的优势。
2. 复用性能差：因为返回的是整个页面，对于每个路由都要重新进行页面刷新，复用性能 上不友好。
3. 前后端耦合严重，前端开发依赖于后端，开发形式上不友好

同构

前后端共用一套 JS 代码，采用不同的构建方式。通过 Node 服务器进行页面的首屏生成。在我的理解上，有点中间件的意思。

优点

兼顾客户端渲染和服务端渲染优点。

缺点

1. 对服务器有一定负载。
2. 需要一定的开发成本。

总结

目前来看，客户端渲染和同构已经成为主流。

首屏渲染

因为开始渲染时，浏览器需要下载所有的资源才能正常显示页面，故而造成一段时间的空白页面。一般有两种方式解决：

1. 代码分割。首屏所需要的东西有限，可以将首页需要的东西分割，单独下载，之后的资源再去动态请求。
2. 预展示。可以在加载资源的过程中弄一些 Loading 界面，告诉用户界面正在加载，达到良好的用户体验。

SEO

客户端渲染如果要考虑 SEO，目前有两种方案：

1. 通过 meta 的元属性进行关键字的 SEO
2. 提供一套静态 HTML 模版供浏览器抓取用以 SEO（比如 prerender.io）