随着前端技术的不断发展，越来越多的应用被设计成单页应用（SPA）。这种应用只有一个 HTML 文件，所有的内容都通过异步请求加载，然后在浏览器上动态生成。虽然这种应用会让用户体验更加流畅，但也会对性能带来一定的挑战。特别是当我们连接的服务器响应时间很长时，用户可能需要等待一段时间才能看到页面的内容。
在这种情况下，服务端渲染就成为了解决问题的方案。本文将介绍如何使用服务端渲染提高 Vue.js SPA 应用的性能。
什么是服务端渲染？
服务端渲染（SSR）是指在服务器上生成 HTML 文档的技术，将 HTML 文档作为一开始传输给浏览器。在传输过程中，浏览器可以边下载边渲染页面的部分内容，用户可以更快地看到页面的内容。相比于完全由 JavaScript 渲染前端页面，在使用服务端渲染时，首次内容呈现的时间会更快。
对于 SPA 应用来说，使用服务端渲染可以极大地提高页面的加载速度，尤其是在用户网络较慢的情况下。
如何在 Vue.js 中使用服务端渲染？
Vue.js 为我们提供了 vue-server-renderer，将 Vue.js 的 SSR 方案带到了大家的视线。下面我们来看一下如何使用 vue-server-renderer。
安装和配置
首先通过 npm 安装 vue 和 vue-server-renderer 包。
npm install vue vue-server-renderer
在服务器端应用的入口文件（例如 server.js），我们需要引入一些 npm 模块：
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
const express = require('express')
const server = express()在渲染 HTML 的时候，我们还需要一个 vue 实例，然后将其转化为字符串：
-- -------------------- ---- -------
----- --- - --- -----
--------- -
-----
----- ------
------
-
--
---------------------------- ----- ----- -- -
----------------- -- --- ----------- -------------
--createRenderer() 方法创建了一个新的 renderer 实例，然后我们可以使用 renderer.renderToString 方法将 Vue 实例转化为字符串。
打包客户端和服务端代码
接下来需要为客户端和服务器端打包不同的代码 bundle。通过 webpack 可以完成这个任务。
为了打包服务端代码，我们需要使用 Node.js 的 CommonJS 模块和 Node.js 的 API。为此，我们可以创建一个名为 server.config.js 的 Webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
------- -------
------ --------------
------- -
----- ----------------------- --------
--------- ------------------
--
------- -
------ -
-
----- --------
------- ---------------
-------- --------------
--
-
----- ---------
------- ------------
-
-
-
-在这个配置文件中：
- target:
'node'告诉 webpack 构建的包是为 Node.js 环境准备的。 - entry:
'./server.js'表示将要打包的入口文件。 - output:
'./dist/server.bundle.js'表示打包后的文件存放在 dist 目录下。 - module：是 webpack 中最感兴趣的配置项之一。它允许我们定义用于转换文件的 loader，以及能够处理什么类型的文件（例如 JS、CSS、Vue 等）。
然后，在命令行中运行：
webpack --config server.config.js
webpack 会按照以上配置文件打包服务器端应用。
下来是客户端代码的打包过程，创建名为 webpack.config.js 的配置文件：
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
------ --------------
------- -
----- ----------------------- --------
--------- ------------------
--
------- -
------ -
-
----- --------
------- ---------------
-------- --------------
--
-
----- ---------
------- ------------
-
-
-
-这里的配置和服务端代码的配置有一些不同，因为客户端应用是运行在浏览器环境中，需要另外针对浏览器环境的处理和优化。
运行以下代码，使用 Webpack 打包客户端代码：
webpack --config webpack.config.js
然后你将会在 dist 目录下找到两个打包后的文件 – server.bundle.js 和 client.bundle.js。
创建服务器实例
现在我们将编写服务器文件 server.js，并在该文件中创建服务器实例。
-- -------------------- ---- -------
----- --- - --------------
----- -------- - -----------------------------------------------
----- ------- - ------------------
----- ------ - ---------
----------------------------------- - ---------
-- ----
--------------- ----- ---- -- -
----- --- - --- -----
--------- -
-----
----- ------
------
-
--
---------------------------- ----- ----- -- -
-- ----- -
----------------
----------------------------- ------ -------
------
-
---------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------------------------
---------- --- -----------
----- ---------------- --------------------------
-------
------
---- ----------------------
------- ---------------------------------
-------
-------
--
--
--
------------------- -- -- -
------------------- ------- -- -----------------------
--该代码会启动一个服务器实例，并为我们提供根路由。此服务器将在端口 8080 启动。
其中，我们创建了一个新的 Vue 实例，该实例将渲染出了“Hello World!”。我们还在模板字符串中定义了客户端打包后脚本和样式表的链接。
运行客户端和服务器端应用
接下来，我们需要启动服务器。在命令行中输入以下命令：
node dist/server.bundle.js
在浏览器中访问 http://localhost:8080 即可看到“Hello World!”，而浏览器开发工具中渲染的 HTML 源码与服务端渲染的 HTML 源码相同。
总结
在本文中，我们了解了什么是服务端渲染以及如何在 Vue.js 中实现服务端渲染。使用服务端渲染可以让我们在一定程度上提高单页应用的性能，为用户提供更好的体验。虽然在开发和部署时需要注意一些细节，但服务端渲染无疑是 SPA 开发的一个好选择。
示例代码
本文的全部代码可以在 GitHub 上查看，在示例代码 vue-ssr-demo 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459b922968c7c53b0bd47a2