React 原生实现服务端渲染

最新推荐文章于 2023-10-26 10:59:24 发布

爱玲姐姐

最新推荐文章于 2023-10-26 10:59:24 发布

阅读量1k

点赞数 1

分类专栏：大前端 SSR React 文章标签： React SSR 服务器渲染

本文链接：https://blog.csdn.net/jal517486222/article/details/112798533

版权

React 原生实现服务端渲染

文章出处：拉勾大前端高薪训练营

练习代码地址

一、服务器端渲染快速开始

1. 实现 React SSR

引入要渲染的 React 组件
通过 renderToString 方法将 React 组件转换为 HTML字符串
将结果 HTML 字符串响应到客户端

renderToString 方法用于将 React 组件转换为 HTML 字符串，通过 react-dom/server 导入.

2. webpack 打包配置

问题: Node 环境不支持 ESModule 模块系统，不支持 JSX 语法

3. 项目启动命令配置

配置服务器端打包命令： "dev:server-build": "webpack --config webpack.server.js --watch"
配置服务端启动命令： "dev:server-run": "nodemon --watch build --exec\"node build/bundler.js\""

二、客户端 React 附加事件

1. 实现思路分析

在客户端对组件进行二次“渲染”，为组件元素附加事件

2. 客户端二次“渲染” hydrate

使用 hydrate 方法对组件进行渲染，为组件元素附加事件。
hydrate 方法在实现渲染的时候，会复用原本已经存在的 DOM 节点，减少重新生成节点以及删除原本 DOM 节点的开销。
通过 react-dom 导入 hydrate

ReactDOM.hydrate(<Home/>, document.getElementById('#root'))

3. 客户端 React 打包配置

webpack 配置
打包目的：转换 JSX 语法，转换浏览器不识别的高级 JavaScript 语法
打包目标位置：public文件夹
打包启动命令配置

"dev:client-build": "webpack --config webpack.client.js --watch"

4. 添加客户端包文件请求链接

在响应给客户端的 HTML 代码中添加 script 标签，请求客户端 JavaScript 打包文件。

  <html>
    <head>
      <title> React SSR</title>
    </head>
    <body>
      <div id="root">${content}</div>
      <script src="bundle.js"></script>
    </body>
  </html>

5. 服务器端实现静态资源访问

服务器端程序实现静态资源访问功能，客户端 JavaScript 打包文件会被作为静态资源使用。

app.use(express.static('public'))

三、优化

1. 合并 webpack 配置

服务器端 webpack 配置和客户端 webpack 配置存在重复，将重复配置抽象到 webpack.base.js 配置文件中

2. 合并项目启动命令

目的：使用一个命令启动项目，解决多个命令启动的繁琐问题，通过 npm-run-all 工具实现。

"dev": "npm-run-all --parallel dev:*"

3. 服务器端打包文件体积优化

问题：在服务器端打包文件中，包含了 Node 系统模块，导致打包文件本身体积庞大。
解决：通过 webpack 配置剔除打包文件中的 Node 模块。

最低0.47元/天解锁文章

爱玲姐姐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 原生实现服务端渲染

React 原生实现服务端渲染文章出处：拉勾大前端高薪训练营练习代码地址一、服务器端渲染快速开始1. 实现 React SSR引入要渲染的 React 组件通过 renderToString 方法将 React 组件转换为 HTML字符串将结果 HTML 字符串响应到客户端renderToString 方法用于将 React 组件转换为 HTML 字符串，通过 react-dom/server 导入.2. webpack 打包配置问题: Node 环境不支持 ESM.
复制链接

扫一扫