3-3-05-服务端渲染概述

服务端渲染概述

spa 的优缺点

优点：用户体验好，开发效率高，渲染性能好，可维护性好
缺点：

• 首屏渲染时间过长，与传统服务端渲染直接获取服务端渲染好的 html 不同，spa 使用 js 在客户端生成 html 来呈现网页内容，用户需要等待客户端 js 解析执行完才能够看到页面，这样就使得首屏加载时间过长影响用户体验。
• 不利于 SEO，当搜索引擎爬取网站 html 文件的时候单页面的 html 是没有内容的，因为他需要通过客户端 js 解析执行完才能够生成完 html 内容，所以目前的主流的搜索引擎堆这方面的抓取还不好。

为了解决这两个缺点，可以采用服务端渲染的方式，通过在服务端执行代码生成 html ，让后将生成好的 html 直接返回给客户端。客户端只需要负责展示就可以。

同构应用

• 通过服务端渲染首屏直出，解决 SPA 应用首屏渲染慢以及不利于 SEO 问题
• 通过客户端渲染接管页面内容交互得到更好的用户体验

这种方式通常称之为现代化的服务端渲染，也叫同构渲染。

这种方式构建的应用称之为服务端渲染应用，或者是同构应用。

相关概念

什么是渲染

渲染就是把数据加模板拼接到一起，渲染的本质就是字符串的解析替换。

• 传统的服务端渲染

早期的 web 页面渲染都是在服务端进行的，服务端在运行的过程中把所需要的数据结合页面模板渲染为 html ，然后响应给客户端浏览器，浏览器获取到的直接就是包含内容的页面。

• 前后端代码完全耦合在一起，不利于开发和维护
• 前端没有足够发挥空间
• 服务端压力大（因为都是在服务端渲染）
• 用户体验一般，相比于spa，每次想要查看其他页面必须完整的进行一次刷新。单页面应用程序可以不刷新页面展示另一个页面。

客户端渲染

AJAX 技术使得客户端动态的获取数据成为可能，客户端可以获取数据就可以将原本在服务端渲染的工作放到客户端上完成。

把服务端渲染的工作放到客户端可以解决前面所说的传统服务端渲染的弊端。

在整个过程中服务端只负责数据处理，页面渲染的工作都是由前端（客户端）完成。这就是前后端分离。

客户端渲染的缺点就是首屏渲染慢、不利于 SEO。

为什么客户端渲染首屏渲染慢？

客户端渲染一个页面首先回去向服务端请求一个空的页面然后加载页面的脚本，然后请求脚本中的 ajax 请求，相比于服务端渲染，这些过多的请求就造成了首屏渲染比较慢的现象。

为什么客户端渲染不利于 SEO

搜索引擎是通过抓取网站的内容然后呈现给用户，客户端渲染是一个空页面，所以搜索引擎根本就抓取不到当前网站的任何信息，所以其 SEO 为 0

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

现代化的服务端渲染既可以解决传统服务端渲染前后端代码耦合、服务端压力大、用户体验查的问题，又可以解决客户端渲染不利于 SEO 以及首屏渲染慢的问题。

同构渲染是前端渲染和后端渲染结合的一种模式，并且结合了后端渲染的优点和前端渲染的优点。

同构渲染的流程：

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

同构渲染的问题

1、开发条件有限

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

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

客户端渲染只需要构建客户端应用就可以，同构渲染则需要构建两个端

客户端渲染可以部署在任意的web服务器上，同构渲染只能部署在 nodejs server

3、更多的服务端负载

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

服务端渲染使用建议

• 首屏渲染速度是否真的重要？
• 是否真的需要 SEO？