同构渲染（客户端渲染 + 服务端渲染）

什么是同构渲染

1.基于React、Vue等框架，客户端渲染和服务器端渲染的结合
.在服务端执行一次，用于实现服务器渲染（首屏直出）
.在客户端执行一次，用于接管页面交互
2.核心解决了SEO和首屏渲染慢的问题
3.拥有传统服务端渲染的优点，也有客户端渲染的优点

同构渲染的流程

1.客户端请求一个地址走到服务端；
2.服务端通过接口服务查询页面所需数据，并返回到服务端；
3.服务端渲染页面以及生成客户端SPA脚本；
4.返回渲染好的页面内容和客户端的SPA脚本给客户端，也就是html；
5.客户端呈现服务端返回的html；
6.客户端通过页面中的脚本激活为SPA应用；
7.客户端渲染页面的交互逻辑。

如何实现同构渲染

1.使用Vue、React等框架的官方解决方案。优点是有助于理解原理，缺点是需要搭建环境，比较麻烦；
2.使用第三方解决方案，比如：React生态的Next.js和Vue生态的Nuxt.js。

同构渲染的问题

1.开发条件有限：

.浏览器特定的代码只能在某些生命周期钩子函数中使用；
.一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行；
.不能在服务端渲染期间操作DOM .某些代码操作需要区分运行环境
…

2.涉及构建和部署的要求更多

.客户端渲染只需要构建在客户端应用即可，而且可以在任意web服务器中部署;
.而同构渲染需要构建两个端（客户端和服务端），并且最好部署在node.js server上（其他环境会很麻烦）。

3.更多的服务端负载：

.在Node中渲染完整的应用程序，相比仅仅提供静态文件的服务器需要占用大量的CPU资源
.如果应用在高流量环境下使用，需要准备相应的服务器负载
.需要更多的服务端渲染优化工作处理
…

应用场景

.首屏渲染速度太慢
.需要SEO
…