前言
随着 Web 技术的不断发展，越来越多的网站采用了前后端分离的架构，前端负责展示页面，后端负责提供数据接口。Vue.js 作为一款流行的前端框架，在前端开发中得到了广泛的应用。随着 Vue.js 项目的不断增多，如何优化 SEO 已成为一个越来越重要的问题。本文将介绍如何构建 Vue SSR 应用以及如何解决 SEO 问题。
什么是 Vue SSR
Vue SSR 全称是 Vue.js 服务端渲染，是指将 Vue.js 应用程序在服务器端完成初次渲染，然后将渲染结果发送给浏览器端的技术。与传统的客户端渲染(CSR)相比，SSR 在 SEO、页面加载速度等方面有着明显的优势。
在 SSR 中，前端应用程序运行在服务器端，服务器端可以将应用程序中的 VNode 转换为 HTML 字符串并返回给浏览器端。这样，在页面请求到达浏览器端时，浏览器端获得的已经是一个完整的 HTML 页面，不需要再等待 JavaScript 的加载和解析，从而加快页面加载速度。
如何构建 Vue SSR 应用
Vue.js 官方提供了一个 vue-server-renderer 包来帮助我们构建 SSR 应用。使用 vue-server-renderer 构建 SSR 应用主要分为以下几个步骤：
步骤一：创建 Vue 实例
import Vue from "vue";
import App from "./App.vue";
// 创建 Vue 实例
const app = new Vue({
render: h => h(App)
});步骤二：创建服务端渲染器
-- -------------------- ---- ------- ------ --- ---- ------ ------ --- ---- ------------ ------ - -------------- - ---- ---------------------- -- -- --- -- ----- --- - --- ----- ------- - -- ------ --- -- -------- ----- -------- - ---------------- --------- ----------------------- ---
步骤三：渲染 Vue 实例
-- -------------------- ---- -------
------ --- ---- ------
------ --- ---- ------------
------ - -------------- - ---- ----------------------
-- -- --- --
----- --- - --- -----
------- - -- ------
---
-- --------
----- -------- - ----------------
--------- -----------------------
---
-- -- --- --
---------------------------- ----- ----- -- -
-- ----- -
-----------------
- ---- -
------------------
-
---上面的代码中，我们首先创建了一个 Vue 实例，然后用 createRenderer 方法创建了一个服务端渲染器。最后调用 renderToString 方法将 Vue 实例渲染成 HTML 字符串。
步骤四：将 HTML 字符串发送给客户端
将渲染出来的 HTML 字符串挂载到一个服务器端的路由上，然后在客户端通过 AJAX 或者 WebSocket 等技术请求该路由，就可以获得已经渲染好的 HTML 页面，从而实现 SSR。
解决 SEO 问题
对于 SSR 应用来说，SEO 是一个重要的问题。在 CSR 中，由于搜索引擎爬虫无法执行 JavaScript 代码，因此无法获取页面内容，导致搜索引擎无法正确抓取页面内容。而在 SSR 中，由于服务器返回的是渲染好的 HTML 字符串，搜索引擎爬虫可以直接抓取页面内容，从而能够正确地解析网站的内容。
为搜索引擎爬虫提供 HTML 版本
搜索引擎爬虫无法执行 JavaScript，因此无法获取通过 JavaScript 渲染出来的页面内容。为了让搜索引擎爬虫可以正确抓取页面内容，我们需要在服务器端为搜索引擎爬虫提供一份纯 HTML 的版本。我们可以在服务器端判断 HTTP 请求的 UA 字段，如果是搜索引擎爬虫，则返回纯 HTML 的版本，否则返回 SSR 渲染出来的 HTML 页面。
-- -------------------- ---- -------
-- ---------- -----
------------ ----- ---- -- -
----- ----- - -------------------------------------------------------------------------------
-- ------- -
-- --- ---- ---
---------------------------- -- ----- --------------- --------
- ---- -
-- -- --- ---- ---- --
---------------------------- ----- ----- -- -
-- ----- -
-----------------
- ---- -
---------------
-
---
-
---使用 vue-meta 插件
在 CSR 中，我们可以使用 meta 标签来优化 SEO。同样的，在 SSR 中也可以使用 meta 标签来优化 SEO。Vue.js 官方提供了一个 vue-meta 插件来帮助我们在 SSR 中使用 meta 标签。
使用 vue-meta 插件非常简单，只需要在 Vue 组件中定义一个 metaInfo 对象来指定 meta 标签信息即可。
-- -------------------- ---- -------
----------
-----
---
------
-----------
--------
------ ------- -
----- --------------
--------- -
------ --- ---- -------
----- -
-
----- --------------
-------- --- ---- ------------
--
-
--------- -----------
-------- --- ---- ------
--
---
-
-
--
---------在服务器端，我们也需要将 meta 标签信息添加到 HTML 中。我们可以使用 vue-server-renderer 的 inject 方法来将 meta 标签信息注入到 HTML 中。
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------
------ - ------------- - ---- -----------
-- --------
----- -------- - ----------------
--------- ------------------------
------- -
------- ----- -- -------
--------- ---------------------------- -- -- ---- -------
-
---在 Express.js 的路由中，我们也需要将 meta 标签信息和页面 HTML 一起返回给浏览器端。
-- -------------------- ---- -------
------------ ----- ---- -- -
----- ----- - -------------------------------------------------------------------------------
-- ------- -
-- --- ---- ---------- ---- --------
------------------------------------ -- ----- --------------- --------
- ---- -
-- -- --- ---- ---- --- ---- ----
---------------------------- ----- ----- -- -
-- ----- -
-----------------
- ---- -
----------
-------
------------------
---
-
---
-
---总结
本文介绍了如何构建 Vue SSR 应用以及如何解决 SEO 问题。通过采用 SSR 技术，我们可以让搜索引擎爬虫正确抓取网站内容，从而提高网站的 SEO 效果。不过，SSR 也有其自身的缺点，例如对服务器的压力比较大，需要额外的开发工作等。因此，在实际项目中需要根据具体情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e033faf6b2d6eab3b4758d