单页应用（SPA）是前端开发热门技术之一，SPA 可以有效提升用户的感知体验，提高访问速度。但是在某些情况下，SPA 也有一些缺点，例如 SEO 不友好、首屏时间较长等问题。因此，为了解决这些问题，我将介绍 SPA 应用中如何使用服务器端渲染（SSR）。
什么是服务器端渲染
服务器端渲染（SSR）是将服务器端的数据和 HTML 模板结合在一起，生成完整的 HTML 页面并将其返回客户端。这个过程在客户端浏览器中急速加载，用户不会感知到这个过程。SSR 可以有效提高首屏渲染速度和 SEO 搜索引擎优化等效果。
理解 SSR 在 SPA 中的作用
对于 SPA 应用，我们都知道单页应用是由 JavaScript 及数据动态生成页面的，SPA 应用通过前端路由控制页面跳转，但在当我们访问 SPA 应用中不存在的页面时，后端返回的是 404 页面，而这个页面是无法被搜索引擎抓取的，也就是说搜索引擎优化效果差。SSR 可以解决这个问题，将页面在服务器端成型返回客户端，搜索引擎抓取到的是完整的首屏页面信息，不会错过任何重要内容，提高 SEO 搜索引擎优化效果。
实现 SSR 的步骤
下面简单介绍 SPA 中实现 SSR 的基本过程。
步骤一：服务端环境的搭建
开发环境：需要有一个 Node.js 服务端环境的搭建，在本地开发环境中可以使用 express、koa 等框架，这里以 express 对 SSR 的实现为例。
生产环境：服务器上需要支持 Node.js 开发平台的环境，并且需要使用 pm2 等进程守护软件运行 Node.js 服务器，保证应用的稳定性和高可用性。
步骤二：开发一套服务器端渲染路由系统并渲染页面
在 express 中，我们可以自定义一套后端路由系统。通过 express 提供的 ejs 或 pug 等模板语言，将 HTML 模板和服务端数据进行组合生成完整的 HTML 页面，供客户端访问。
代码示例：
---------------- -------------------- ----------
------------- -------- -------
---------------- ----------------- -
------------------------ -
------ ---------
--------- ---- ------
------------ ----- --- -----
--
--
------------ ----------------- -
------------------------- -
------ ---- ----
--------- --------
------------ -----------
--
--步骤三：打包客户端需要加载的 JavaScript 资源文件
在服务端渲染的情况下，需要将客户端需要加载的 js、css 资源文件打包好后在后台指定返回给客户端使用。
步骤四：修改客户端代码
将原来的客户端 SPA 代码改造成即支持服务端渲染，也支持客户端渲染。
代码示例：
-- ------
------ --- ---- -----
------ --- ---- -----------
------ ------ ---- ---------- -- --------
-- ---------------------------
------ -------- --------- -- -
----- --- - --- -----
-------
------- - -- ------
--
------ - ---- ------ -
--- ---------
----- - --------- - - ----------------
----- ------- - ------------------
----- ------ - ---------
------------------- -------------------------
-- ---------
--------------- ----- ---- -- -
-- ---------------
----------------- -- -
----- - --- - - -----------
----- ---- - -
------
------
---------- -----------
----- --------------------- -----------------
------- -------------------------------
------- -----------------------------
-------
------
---- -------------------------------------
-------
-------
-
--------------
--
--
-- ----
-------------------步骤五：配置打包工具webpack
在 app-client.js 中，我们使用了 Vue 实例，并在代码中直接挂载到了 id 为 app 的 DOM 上。但是在服务器端渲染时，并不会将 Vue 实例直接设置到客户端 html 上，因为我们需要在后面将组件挂载到实例上。所以我们需要在客户端渲染时，将组件挂载到 Vue 实例上。这个 Vue 实例需要在服务器端先渲染好，而客户端不应该重新创建一份新的 Vue 实例。所以我们需要在服务器端和客户端公用一份 Vue 实例。
代码示例：
-- ------------------------
----- ------- - ------------------
----- ------------- - ---------------------------------
----- ------------------ - --------------------------------------------
----- ---- - ---------------
-------------- - -
------ ------------------------
------- -------
------- -
----- ----------------------- ----------
--------- -------------------
-------------- ------------
--
------- -
------ -
-
----- --------
------- ---------------
-------- ---------------
--
-
----- ---------
---- -
-------------------
-------------
--
--
--
--
---------- ---------------
---------- ---------
---
-------- -
--- ----------------------
----------------------- ----------------------------------- -- ---------------
---------------------- -----------
---
--- ---------------------
--
-打包工具 webpack 还需要配置 client 端和 server 端的配置文件，这两份配置文件需要相互配合，确保最终的构建代码可以运行成功。
步骤六：构建和部署
最后，我们需要对整个应用的前后端都进行构建打包，将生成的静态文件部署到服务器上，然后就可以通过访问服务器的 URL 地址来查看 SSR 的效果了。
本文总结
SSR 技术可以有效解决单页应用（SPA）中存在的 SEO 不友好、首屏时间较长等问题。本文介绍了 SPA 应用中如何使用服务器端渲染（SSR）技术，包括步骤一：服务端环境的搭建，步骤二：开发一套服务器端渲染路由系统并渲染页面，步骤三：打包客户端需要加载的 JavaScript 资源文件，步骤四：修改客户端代码，步骤五：配置打包工具 webpack，步骤六：构建和部署。希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6641c551d3423812e4fc433a