介绍
both-render 是一个基于 React 的 npm 包，旨在实现前端界面的同构渲染（SSR）。该 npm 包的核心特点是能够在服务端和客户端同时生成 UI，从而提高用户体验和页面性能。
本文将详细介绍如何使用该 npm 包，内容包括如何安装、如何使用以及示例代码等。
安装
在项目根目录下执行以下命令：
npm install both-render --save
使用
在项目中引入 both-render：
import bothRender from 'both-render';
API
both-render 提供两个方法：renderServer 和 renderClient。
renderServer(element: React.ReactNode, request: express.Request, response: express.Response): string
在服务端执行渲染，并返回渲染好的 HTML 字符串。
参数：
element：React 元素。request：express 请求对象。response：express 响应对象。
示例代码：
-- -------------------- ---- ------- -- --------- ------ ------- ---- ---------- ------ ----- ---- -------- ------ - -------------- - ---- ------------------- ------ --- ---- -------- ------ ---------- ---- -------------- ----- --- - ---------- ------------ ----- --------- --------- -- - ----- ---- - ---------------------------- --- -------- ---------- -------------------- --- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
renderClient(element: React.ReactNode, container: Element | Document | undefined): void
在客户端执行渲染，并将渲染结果挂载到指定的 DOM 节点中。
参数：
element：React 元素。container：在客户端渲染时需要挂载到的 DOM 节点。
示例代码：
// client.ts
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import bothRender from 'both-render';
bothRender.renderClient(<App />, document.getElementById('root'));示例代码
下面将演示如何使用 both-render 实现同构渲染（SSR）。
1. 创建项目
首先，我们需要创建一个名为 both-render-example 的项目，并且安装必要的依赖和 devDependencies：
npx create-react-app both-render-example cd both-render-example npm i express both-render
2. 创建服务端入口文件
我们需要在项目根目录下创建一个名为 server.ts 的文件，并编写服务端代码：
-- -------------------- ---- ------- -- --------- ------ ------- ---- ---------- ------ ----- ---- -------- ------ - -------------- - ---- ------------------- ------ --- ---- ------------ ------ ---------- ---- -------------- ----- --- - ---------- ------------ ----- --------- --------- -- - ----- ---- - ---------------------------- --- -------- ---------- -------------------- --- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
3. 创建客户端入口文件
我们需要在项目根目录下创建一个名为 client.ts 的文件，并编写客户端代码：
// client.ts
import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App';
import bothRender from 'both-render';
bothRender.renderClient(<App />, document.getElementById('root'));4. 修改 index.html 文件
我们需要将 index.html 文件中的 <div id="root"></div> 修改为 <div id="root">{{SSR}}</div>，以便在服务端将渲染好的 HTML 插入到该节点中：
-- -------------------- ---- -------
---- ----------------- ---
--------- -----
----- ----------
------
----- --------------- --
-------
------
---- -----------------------
------------- ---- -- ------ ---------- -- --- ---- ---------------
------- --------------------------------------
-------
-------5. 修改 App.js 文件
为了方便演示，我们在 App 组件中添加一个计数器，并添加一个按钮，当点击按钮时，计数器加 1：
-- -------------------- ---- -------
-- ----------
------ ------ - -------- - ---- --------
-------- ----- -
----- ------- --------- - ------------
------ -
-----
--------------- ------------
--------- -----------
------- ----------- -- -------------- - ------- ------------
------
--
-
------ ------- ----6. 运行项目
在项目根目录下执行以下命令，启动服务端和客户端：
npm run build node build/server.js node build/client.js
打开浏览器访问 http://localhost:3000，可以看到如下页面：
可以看到，页面中的计数器初始值为 0，并且可以正常加 1。
接下来我们用 Chrome 的开发者工具来查看页面渲染的过程。
首先打开 Chrome 开发者工具，切换到 Network 选项卡。
点击刷新页面，可以看到请求了两次：一个是客户端请求的 client.js，一个是服务端发起的请求。
选中服务端响应的那个请求，查看 Response，可以看到返回了渲染好的 HTML 页面，其中 {{SSR}} 节点已经被渲染成了 App 组件的内容：
客户端请求的 client.js 文件中包含了渲染客户端 React 应用的代码：
bothRender.renderClient(<App />, document.getElementById('root'));执行
bothRender.renderClient(<App />, document.getElementById('root'))，可以看到页面中的计数器开始计数。
通过以上步骤，我们可以看到服务端渲染和客户端渲染都被执行，并且计数器能正常工作。
总结
both-render 是一个非常强大的 npm 包，能够帮助前端开发者实现同构渲染（SSR），提高页面的性能和用户体验。本文详细介绍了如何使用该 npm 包，内容包括如何安装、如何使用以及示例代码等。希望读者通过本文的介绍，能够更好地掌握该 npm 包的使用方法，从而更好地应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725681e8991b448e869a