前言
在现代前端应用开发中，服务器渲染（Server-Side Rendering，简称 SSR）已经变成了不可或缺的一环。它可以解决单页应用（SPA）首屏渲染慢、SEO 不利等问题。在 Vue 项目中，我们可以使用 @vueneue/ssr-server 这个 npm 包来达到服务器渲染的效果。
安装
在使用 @vueneue/ssr-server 前，需要确保已经安装了 Node.js 和 npm。安装命令为：
npm install @vueneue/ssr-server
基础使用
使用 @vueneue/ssr-server 的基本流程为：
- 编写服务端入口文件
- 编写 Vue 组件
- 将 Vue 组件打包为服务器可读取的文件
- 启动 SSR 服务
编写服务端入口文件
服务端入口文件代码如下：
-- -------------------- ---- -------
----- - --------- - - ----------------------------
----- ------- - ------------------
----- ------ - ---------
--------------- ----- ---- -- -
----- - ---- ------ - - -----------
--------------------
------------------------ -- -
----------
--------- -----
------
------
---------- -----------
----- ---------------- ---------------------
-------
------
---- -------------------------------------
------- ----------------------------
-------
-------
--
--
--
------------------- -- -- -
---------------- ------ ------- -- -----------------------
--这里的 ./dist/app.server 是编译出来的 Vue SSR 服务器端包，可以通过如下命令进行编译：
npm run build:ssr
编写 Vue 组件
在本例中，我们将创建一个简单的 Vue 组件用于演示：
-- -------------------- ---- -------
----------
--------- --------------
-----------
--------
-------------- - -
------ -
------ -
----- ---- ----
-
-
-
---------打包组件
运行 npm run build:client 命令将会把组件打包成浏览器可运行的 JavaScript 文件。
启动 SSR 服务
使用如下命令启动 SSR 服务：
node server-entry.js
这时候 SSR 服务就已经可以通过访问 http://localhost:8080 来查看效果了。
高级使用
如果你想要更深入地使用 @vueneue/ssr-server，可以看一下官方文档https://ssr.vuejs.org/zh/。下面我们来介绍一些高级使用场景。
自定义服务器和路由
可以通过继承 Server 类和 createRouter 函数来实现自定义服务器和路由。
-- -------------------- ---- -------
----- ------ - ------------------------------
----- ------------ - -------------------
----- -------- ------- ------ -
----- ----------- -
----- --- - ----- -----------------
----- ------ - --------------
------ - ---- ------ -
-
-
--- ------------------其中 createRouter 方法参考如下：
-- -------------------- ---- -------
----- - ------------ - - ----------------------
-------------- - -------- -- -
----- ------ - --------------
-----------------
----- ----
---------- -- -- --------------------------
--
------ ------
-路由状态传递
路由状态传递的思路是将路由状态放到全局变量中，然后在渲染服务端页面时将这些状态传递给前端页面。具体的实现代码如下：
在路由中定义一个 beforeRouteEnter 函数，将需要传递的路由状态存入全局变量中：
beforeRouteEnter(to, from, next) {
setGlobalState({title: to.meta.title})
next()
}在服务端与客户端都要定义一个 globalObject 变量来存储这个全局变量：
// 服务端
global.globalObject = { title: '' }
// 客户端
window.globalObject = { title: '' }在服务端渲染时将 globalObject 变量的值传给模板：
const context = {
title: global.globalObject.title
}
const html = await ssrRenderToString(context)在客户端重新创建 Vue 实例时将 globalObject 变量的值传给 Vue 实例：
-- -------------------- ---- -------
-- ---
--- -----
------- - -- ------ -
------ -
------ -------------------------
-
---
------- ---------------
-----------------其他
更多高级使用场景可以参考官方文档https://ssr.vuejs.org/zh/。
结语
通过本文，我们学习了 @vueneue/ssr-server 的基础使用和一些高级使用场景。在实际开发中，可以根据需求选择合适的 SSR 工具。SSR 能够让我们的应用拥有更好的渲染性能和 SEO，是我们不可或缺的一个环节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668ecd9381d61a3540c9b