动手实现react ssr

关于ssr相关的介绍，可以移步之前的一篇博文，本文不再赘述

日常工作中，我们可能都接触过ssr，不过我们可能通常是借助于框架（例如Next.js）的支持来完成ssr。今天我想尝试，摆脱高度封装的前端框架，只依赖react相关的库，来实现ssr。

本篇代码 pnpm i安装依赖，npm run server启动服务

环境：node 20.12.0 react和react-dom版本均为18.3.1

参考文献：知乎专栏：SSR原理与实践

正文

我们的目的，是本地的8080端口起一个node服务，然后当我们访问localhost:8080的时候，服务端能返回给我们一个页面，。在拿到页面之后，浏览器会对页面进行水合，从而使得页面可交互。

首先，我们先安装一下依赖。我比较喜欢pnpm（节省磁盘空间，避免幽灵依赖），所以我直接在命令行敲pnpm i react react-dom express 。安装react（将jsx转为虚拟dom），react-dom（将虚拟dom转成dom），express（用于起一个web服务器）

然后我们新建三个文件，分别是server.js，index.js，App.jsx

App.jsx里面，我们就简单实现一个组件吧，然后要用commonjs的方式去引入和导出（因为我们是极简版本，甚至都没有经过打包构建流程，为了能让node端识别，就直接按cjs规范写了）

index.js里面，我们要去写用于客户端执行的代码，我们暂且随便在里面console.log一句话吧，用于证明index.js被成功加载。

本期的重头戏来了，server.js，不多bb先上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const express = require("express");
const App = require("./app.jsx");
const ReactDom = require("react-dom/server");
const React = require('react')

const server = express();
server.use(express.static('.'))
server.get("/", function (req, res, next) {
  const elementString = ReactDom.renderToString(<App />);
  const html = `<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>my react ssr</title>
  </head>
  <body>
      <div id="root">
         ${elementString}
      </div>
  </body>
  </html>
  <script type="text/javascript"  src="index.js"></script>`;
  res.send(html);
});

server.listen(8080);

对于访问根目录的请求，我们依旧是通过cjs的require，拿到app.jsx的内容。然后借助react-dom/server的api renderToString，将jsx组件转成html字符串 。

接下来就是拼模板啦，直接copy模板，然后把得到的html字符串放到模板字符串中间，并且在最后写一个script标签，加载未来可期的index.js。然后返回response就可以了

然后为了解决node不认识jsx的问题，我们又装了bable的一系列包。依旧是用pnpm安装@babel/cli，@babel/core，@babel/node，babel/preset-env，@babel/preset-react。然后在package.json添加一个script，

1
2
3
"scripts": {
	"server": "babel-node server.js"
}

然后我们就可以通过npm run server，来启动服务了。打开浏览器，访问localhost:8080，可以看到页面正常展示。但是打开控制台，发现index.js没加载出来，404了。是因为请求localhost:8080/index.js 这个静态资源路径，express是不知道你要什么的。需要通过express.static(pathxxx)中间件，来告诉express，以pathxxx作为静态资源目录。例如我这里把index.js放在了根目录，那pathxxx就是“.”就可以了。

再次重启服务，打开控制台，看到index.js正常被加载，打印出了我们想要的东西。

本次暂时只实现服务端渲染的部分，后续客户端水合，且听下回分解

#react #ssr #动手实践 #同构渲染
动手实现react ssr
https://miku03090831.github.io/2024/06/11/动手实现react-ssr/
作者
qh_meng
发布于
2024年6月11日
许可协议