服务端渲染（SSR）: 了解Vue的服务端渲染能力，以及它如何帮助改善SEO和提升首屏渲染速度

一、介绍服务端渲染（SSR）

定义和作用

 

服务端渲染（Server Side Rendering，简称 SSR）是一种流行的渲染页面的方法，它主要是在服务器上执行页面的初始化渲染，生成全量的 HTML，并把这些 HTML 发送给客户端。换句话说，服务器已经预先生成好了页面的标记并发送到客户端，客户端只需要填充少量的动态数据即可。

 

服务端渲染的主要作用是：

 

• 改善首屏加载性能：通过服务器渲染，用户可以最快速度看到页面的主要内容，而不需要等待所有 JavaScript 文件下载完毕。
• 利于SEO：由于搜索引擎爬虫抓取网站时直接看到完全渲染的页面，因此服务端渲染的页面相对更容易被搜索引擎索引。

 

SSR与传统客户端渲染的对比

 

• 客户端渲染：在客户端渲染模式下，服务器仅提供一个最基础的 HTML 框架，真正的内容渲染是在所有的 JavaScript 文件被浏览器下载、解析后在客户端进行的。优点是服务器负载较轻，可支持丰富的交互，用户体验更好。但缺点是首屏加载时间较长，且不利于 SEO。

• 服务端渲染：在服务端渲染模式下，服务器会将请求的页面，在服务器端已经渲染完成后，再发送给客户端。这样一来，首屏渲染速度快，利于 SEO。但缺点是服务器负载大，且复杂的交互还需要客户端代码的配合。

二、Vue 服务端渲染能力

Vue SSR 概览

 

Vue的官方服务器渲染库 Vue Server Renderer 让 Vue 应用程序具备了在服务器端渲染的能力，使得我们的 Vue 应用程序可以在服务器端生成静态的 HTML 字符串，然后送回客户端。这不仅使得内容能够更快地可见，提高了首屏加载速度，也为了搜索引擎优化服务。

 

Vue SSR 主要功能和特性

 

1. 快速初次渲染：对于一些性能要求较高的应用，服务器渲染(SSR)可以提供更好的用户体验。当然，服务端渲染不能代替客户端渲染，因为服务端渲染只会影响初次请求页面的时候的加载速度。

2. SEO 友好：因为打开网页的时候可以立刻看到渲染好的页面内容，所以对于搜索引擎优化(SEO)是有益的。对于大多数 JavaScript 搜索引擎爬虫来说，服务端渲染的页面更容易被识别和抓取。