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