在前端开发中，有许多需要服务器渲染的应用，以提高首屏加载速度和 SEO 支持能力，一些包如 Next.js 和 Nuxt.js 已经解决了大部分问题，但如果你只需要轻量级的服务器端渲染，那么你可以使用 npm 包 universal-render。
什么是 universal-render
universal-render 是一个基于 express 框架的 npm 包，主要是对 express 进行了一系列的封装，使得你可以很方便地实现服务器端渲染。universal-render 并不像 Next.js 和 Nuxt.js 一样提供了完整的脚手架和模板，而是保留了框架灵活可拓展的特性，所以它更像是一个工具库，你可以按照你的需求进行搭配和改造。
如何使用 universal-render
安装
你可以通过 npm 或者 yarn 进行安装：
--- ------- ---------------- ------
或
---- --- ----------------
基本使用
- 在你的工程目录中创建一个 server.js 文件
----- ------- - -------------------
----- --------------- - ----------------------------
----- --- - ----------
--------
-----------------
----- ---------
--------- --------------------
----------- -------------
----------- -------------
--
--
---------------- -------- -- -
------------------- ------- -- ------------------------
---在你的工程目录中创建 dist 目录，并且在目录中带有你的打包后的客户端代码和服务器端代码（你可以使用 webpack 进行打包，也可以手动编写）。服务器端代码负责渲染页面，客户端代码负责接管渲染后的页面。
在你的工程目录中创建 index.html 模板文件，模板文件包含了客户端代码的引入标签。
--------- -----
----- ----------
------
----- ----------------
----------------------
-------
------
---- ---------------
------- --------------------------
-------
-------- 在你的工程目录中创建入口文件（如 index.js），实现服务器端渲染数据，并返回给客户端渲染。
------ ----- ---- -------- ------ - -------------- - ---- ------------------- ------ --- ---- -------- ------ ------- -------- ----- ---- - ----- ------- - ------------------- ---- ------------------ -
------ ----- ---- -------- ------ - ------- - ---- ------------ ------ --- ---- -------- ------------ --- --------------------------------
API
universalRender 接口提供了一些可选的参数，这些参数可以帮助我们配置 universalRender。
下列参数是必须要提供的：
| 参数 | 类型 | 说明 |
|---|---|---|
| path | String | 打包后的文件所在路径(default: "./dist") |
| template | String | 用于渲染 html 页面的模版路径(default: "./dist/index.html") |
| clientPath | String | 客户端代码访问路径。(如"./client.js") |
| serverPath | String | 服务器端代码访问路径。(如"./server.js") |
| errorHandler | Function? | 错误处理器。你可以传入一个函数，用于处理服务器端渲染的错误，也可以忽略该项。 |
总结
universal-render 提供了一些内建的特性，可以让你很方便的实现服务器端渲染。如果你熟悉 express 的开发流程，那么使用 universal-render 会变得十分容易。通过对 universal-render 的学习，你可以更好的理解服务器端渲染的实现原理，并且可以在项目中很方便地应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d1981e8991b448daaee