服务端渲染、客户端渲染、同构渲染相关简介

什么是渲染

把【数据】+【模板】拼接到一起

传统的服务端渲染

最早的web页面渲染都是在服务端进行的，也就是服务端在运行过程中将数据+模块拼接到一起，然后返回html给客户端，客户端直接展示就行。
流程图如下：

服务端渲染的缺点：

• 前后端代码完全耦合在一块，不利于开发和维护
• 前端没有足够的发挥空间
• 服务端压力大
• 用户体验一般，用户需要刷新才能重新获取数据

客户端渲染

因为服务器渲染存在上述问题，且伴随着ajax的产生，使得我们可以动态获取数据。

我们现在常见的SPA单页面如Vue\React采用的都是客户端渲染。
客户端渲染优点：

• 用户体验好
• 开发效率高
• 渲染性能好
• 可维护性好
  客户端缺点：
• 首屏渲染时间长,单页面利用js生成页面，这会导致用户需要等待首屏
• 不利于seo：当搜索引擎爬取html的时候是没内容的，因为要客户端js解析完生成html

为了解决以上问题，业界又提出了服务端渲染，借鉴了传统的服务端渲染，我们一般称之为现代化的服务端渲染或同构渲染。

现代化服务端渲染（同构渲染）

客户端存在首屏渲染慢、不利于seo问题，现代化的服务端渲染是如何解决的呢？采用后端渲染+前端渲染的模式，也称同构渲染。

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

同构渲染的流程：

如何实现同构渲染？

• 使用Vue\React的官方解决方案
  • 优点：有助于理解原理
  • 缺点：需要搭建环境，比较麻烦
• 使用第三方解决方案
  • React的Next.js
  • Vue的Nuxt.js