React SSR，如何理解和使用注水函数hydrateRoot()?

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

继续react的SSR话题，讲完了react脱水的两个函数，renderToString()和renderToPipeableStream()。现在来讲讲注水函数hydrateRoot()。这个函数本身用起来是非常的简单，就是连带的事情比较麻烦。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。官方把这个行为称之为“注水”，苏南大叔个人觉得翻译成“恢复”更加合适一些。

前置阅读

这篇文章的内容，是和下面的两篇文章的代码，配套使用的。

• https://newsn.net/say/react-render-to-string.html
• https://newsn.net/say/react-render-to-pipeable-stream.html

hydrateRoot() 官方说明

react对hydrateRoot()的官方说明：

• https://zh-hans.react.dev/reference/react-dom/client/hydrateRoot

函数原型：

const root = hydrateRoot(domNode, reactNode, options?)

因为应用场景的问题，这里依然暂时不考虑options的情况。

createRoot() 兄弟函数

hydrateRoot()的兄弟函数是createRoot()，官方说明：

• https://zh-hans.react.dev/reference/react-dom/client/createRoot

函数原型是：

const root = createRoot(domNode, options?)

两者在使用方面，是非常的类似。这个相似度，请参考下面的代码说明。

最简单的代码修改方式

这里还是使用最简单的create-react-app的cra模版来说事。执行下面的命令即可获得目标代码。

create-react-app test
cd test
npm i react-router-dom --save

参考文章：

• https://newsn.net/say/create-react-app.html

精简版src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

注水版src/index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.hydrateRoot(document.getElementById('root'),<App/>);

没错，核心部分就这么多。

最简单的代码构建方式

对src/index.js进行修改后，npm start命令就没有啥太大意义了。执行的话，也是有报错信息。这里有意义的命令，就是这个npm run build，就可以得到一个build/static/js/main.xxxxx.js。这个就是配合这些脱水函数的输出模版里面的ssr.js文件，记得改名即可。

这个就是获取ssr.js的最简单的方式，因为苏南大叔的react系列文章，大多数都是基于这个create-react-app的默认cra模版的。所以，这种获取带hydrateRoot()函数的特殊ssr.js，是最好理解的。

相关的代码修改

本文仅仅是描述，获得带hydrateRoot()函数的特殊ssr.js文件的最简单方式，以及相关函数的最简单使用方式。仅仅需要小小的变通，就可以使用这个注水函数了。

但是，这个函数的背后，隐患着较为复杂的后续代码修改逻辑。会在后续文章里面再进行说明。目前，只是形式上获得了ssr.js。但是，极有可能这个ssr.js是不生效或者出错的。

生成文件的有效性，并不是本篇文章所能解决的问题。本文仅仅解决，代码的调用，以及生成文件的问题。

结束语

苏南大叔的react经验文章，请点击：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。