在现代的 web 开发中，前端渲染已经成为了一种流行的方式，它可以加快页面加载速度和提高用户体验。然而，单靠前端渲染还是有一些限制的，例如 SEO 不友好，对于慢速网络的用户来说，加载时间会变得更长。
随着 Node.js 的流行，server-side rendering（SSR）变得越来越普遍。SSR 可以在服务器端渲染出 HTML 文档，将其发送给浏览器，让用户在浏览器上看到一个已经渲染好的页面，从而加快页面的展示速度。
在 Node.js 中，有许多用于 SSR 的库和框架，其中比较流行的是 react、vue 和 angular。如果你使用的是这些框架，你可以使用它们自带的 SSR 工具。但如果你使用的是其他一些库，你可能需要手动实现 SSR，此时可以使用 server-side-render-resource npm 包来简化这个过程。
安装
你可以通过下面的命令来安装 server-side-render-resource：
npm install server-side-render-resource --save
使用
首先，你需要在服务器端创建一个 express 应用，并引入 server-side-render-resource：
const express = require('express');
const SSR = require('server-side-render-resource');
const app = express();接着，你需要创建一个 SSR 实例：
-- -------------------- ---- -------
----- --- - --- -----
------------- ----------------------
------------- -------------------
------- -
---------- --------------
---------- --------------
---------- -------------
--
----------------- ------------------------
---其中，htmlFilePath 是你的 HTML 文件的路径，mainFilePath 是你的 JavaScript 入口文件的路径，routes 是一个数组，它包含了路由和对应组件的映射关系，staticAssetsPath 是静态资源的路径，如图像、字体等。
注意，routes 数组的顺序很重要。server-side-render-resource 会按照数组中的顺序来匹配路由，如果找到了合适的路由，就不会再继续查找。
接着，你需要使用 ssr.middleware 属性来注册 server-side-render-resource 的中间件：
app.use(ssr.middleware);
最后，你需要监听一个端口来启动你的服务器：
app.listen(3000, () => {
console.log('Server is listening on http://localhost:3000');
});示例
下面是一个简单的示例：
index.html：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
-------
------
---- ----------------
-------
-------main.js：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ --- ---- --------
----- ------- - -
---------------
---- --
----------------
--
------------------------- ---------------------------------routes.js：
export default [ ['/', 'Home'], ['/about', 'About'], ['/contact', 'Contact'] ];
app.js：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------- ---- - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
------ ------- ---- -----------------------
----- --- - -- -- -
-----
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
------
--
------ ------- ----Home.js：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- -- -
-----
-------------
---------- -- -- ------------
------
--
------ ------- -----About.js：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -- -- -
-----
--------------
------- -- --- ----- ---------
------
--
------ ------- ------Contact.js：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - -- -- -
-----
----------------
------ --- ----- -- -- ------------------------
------
--
------ ------- --------现在，你可以使用下面的命令来启动服务器：
node server.js
然后，在浏览器中打开 http://localhost:3000 就可以看到一个使用 SSR 的 web 应用了。
总结
使用 server-side-render-resource 可以大大简化 SSR 的过程，它提供了一个简单的方式来处理路由、静态资源和 HTML 文件。在 SSR 的过程中，尽量保持你的代码简单而可维护，这样可以帮助你更好地维护你的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f242d443b0ab45f74a8b8e9