npm 包 universal-render 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，有许多需要服务器渲染的应用，以提高首屏加载速度和 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 进行安装：

npm install universal-render --save

或

yarn add universal-render

基本使用

在你的工程目录中创建一个 server.js 文件

-- -------------------- ---- -------
----- ------- - -------------------
----- --------------- - ----------------------------
----- --- - ----------

--------
  -----------------
    ----- ---------
    --------- --------------------
    ----------- -------------
    ----------- -------------
  --
--

---------------- -------- -- -
  ------------------- ------- -- ------------------------
---

在你的工程目录中创建 dist 目录，并且在目录中带有你的打包后的客户端代码和服务器端代码（你可以使用 webpack 进行打包，也可以手动编写）。服务器端代码负责渲染页面，客户端代码负责接管渲染后的页面。
在你的工程目录中创建 index.html 模板文件，模板文件包含了客户端代码的引入标签。

-- -------------------- ---- -------
--------- -----
----- ----------
  ------
    ----- ----------------
    ----------------------
  -------
  ------
    ---- ---------------
    ------- --------------------------
  -------
-------

在你的工程目录中创建入口文件（如 index.js），实现服务器端渲染数据，并返回给客户端渲染。

import React from "react";
import { renderToString } from "react-dom/server";
import App from "./App";

export default function (req, res) {
  const content = renderToString(<App />);
  res.send(content);
}

import React from "react";
import { hydrate } from "react-dom";
import App from "./App";

hydrate(<App />, document.getElementById("app"));

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