React服务端渲染疑问：是否需Webpack及引入bundle.js

嘿，我来帮你理清这两个SSR里的关键问题，很多刚接触SSR的同学都会有类似困惑：

1. 使用react-dom/server的renderToString时，是否仍需用Webpack构建项目？还是renderToString可完成构建工作？ #

完全需要用Webpack，renderToString可没法替你完成构建工作，它的职责非常单一——仅仅是在Node.js环境里把React组件转换成对应的HTML字符串。

为什么还需要Webpack？原因有这几点：

• 浏览器没法直接识别JSX、ES6+模块语法（比如import/export），还有你可能用到的TypeScript、CSS预处理器（比如Sass），这些都需要Webpack来转译、打包成浏览器能解析的代码。
• SSR项目一般分为服务端打包和客户端打包两部分：
  • 服务端打包：用Webpack处理Node环境运行的代码（比如你的SSR服务器脚本、React组件），转译JSX和ES6+语法，让Node.js能正确执行。
  • 客户端打包：生成浏览器端的bundle，后续用来做「hydration（水合）」——也就是把静态HTML激活成有交互能力的React应用。
• 如果你用到了第三方库，很多库的源码也是ES模块格式，同样需要Webpack来处理依赖解析和打包。

简单说，renderToString是SSR里的「渲染环节」，而Webpack是「代码预处理/打包环节」，二者各司其职，缺一不可。

2. 是否需要在HTML中添加<script src="/bundle.js"></script>？若需要，原因是什么？renderToString不是已将内容转为字符串了吗？ #

必须要加，这是让你的SSR应用从「静态HTML」变成「可交互React应用」的关键一步。

renderToString生成的只是静态的HTML结构，它没有包含任何React的交互逻辑、生命周期钩子或者事件绑定。举个例子：你用renderToString渲染了一个带onClick事件的按钮，页面上会显示这个按钮，但点击它不会有任何反应——因为静态HTML里根本没有对应的JS逻辑。

而<script src="/bundle.js"></script>加载的就是你用Webpack打包好的客户端代码，它的核心作用是「hydrate（水合）」：

1. 客户端JS会识别页面上已有的静态HTML节点
2. 把这些节点和React虚拟DOM关联起来
3. 激活所有的交互逻辑、生命周期，让页面真正变成一个可交互的React应用

如果不加这个脚本，你的页面就只是一个静态的HTML快照，没有任何React应用的动态特性。

内容的提问来源于stack exchange，提问作者Miguel Giménez