SSR工作原理详解及非Node.js环境下React SSR实现咨询

一、SSR的核心工作原理 #

和你理解的CSR（客户端渲染）不同，SSR（服务器端渲染）的核心是在服务器端提前完成React组件到HTML字符串的转换，而非让浏览器从零开始渲染DOM：

1. 用户发起页面请求后，服务器接收请求，获取页面所需的业务数据（比如从数据库、API拉取）。
2. 服务器将数据作为props传入React组件，调用React的服务器端渲染API（比如renderToString、renderToPipeableStream），把组件渲染成完整的HTML字符串——这个过程本质是在服务器端模拟React的虚拟DOM构建，然后输出对应的HTML标签。
3. 服务器把生成的HTML字符串包裹在基础HTML模板（包含<head>、<body>等结构）中，发送给浏览器。
4. 浏览器接收到HTML后，直接解析并渲染出可见的页面（首屏加载速度快，SEO友好），同时加载客户端的React JS bundle。
5. 客户端JS加载完成后，执行**Hydration（注水）**过程：React会把已有的静态HTML DOM和客户端的虚拟DOM做映射，绑定事件、恢复组件状态，让静态页面变成可交互的动态页面——这个过程不会重新渲染整个DOM，只是“激活”现有元素。

二、你的理解是否正确？ #

你的核心推测是对的：

• 服务器端只会执行React组件的同步渲染逻辑，异步代码（比如setTimeout、异步API请求）不会在服务器端执行，所以你示例中setTimeout创建的<p>元素不会出现在初始HTML里，要等客户端JS加载完成后才会执行并插入DOM。
• 后续的事件绑定确实是Hydration阶段的工作，但不止于此：Hydration还会恢复组件的状态、关联虚拟DOM与真实DOM，确保页面从静态转为动态后，交互逻辑和CSR渲染的页面一致。

三、非Node.js环境下的React SSR实现方案（以Java为例） #

1. 基于Java JavaScript引擎直接执行React SSR代码 #

Java生态可以通过GraalVM（推荐Java 11+）或Nashorn（Java 8自带）来执行React的服务器端渲染逻辑，步骤如下：

• 打包React组件：用webpack将React组件打包成服务器端可执行的JS bundle，注意避免依赖浏览器专属API（比如window、document），组件中异步逻辑要放在useEffect（仅客户端执行）中。
• Java端执行JS渲染：

  // 示例：用GraalVM执行React SSR代码
  import org.graalvm.polyglot.Context;
  import org.graalvm.polyglot.Value;
  import java.io.FileReader;
  
  public class ReactSSR {
      public static String renderReactComponent(Object props) {
          try (Context context = Context.create("js")) {
              // 加载打包后的SSR bundle
              context.eval("js", new FileReader("path/to/ssr-bundle.js"));
              // 获取导出的渲染函数
              Value renderFunction = context.getBindings("js").getMember("render");
              // 传入props，执行渲染得到HTML字符串
              return renderFunction.execute(props).asString();
          } catch (Exception e) {
              e.printStackTrace();
              return "<div>渲染失败</div>";
          }
      }
  }
  

• 整合到Java Web框架：将渲染得到的HTML字符串嵌入到Thymeleaf、Freemarker等模板引擎的页面中，通过Spring Boot等框架返回给浏览器。
• 客户端Hydration：页面中加载客户端JS bundle，调用ReactDOM.hydrateRoot完成激活：

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

2. 使用Java原生React框架（React4J） #

React4J是完全基于Java的React替代方案，允许你用Java代码编写React组件，无需Node.js：

• 用Java注解定义组件，比如：

  @ReactComponent
  public class App {
      @Prop
      private String message;
  
      @Render
      public ReactNode render() {
          return div(text(message));
      }
  }
  

• 服务器端直接调用React4J的渲染API生成HTML字符串，客户端加载React4J编译的JS完成Hydration，全程无需Node.js参与。

四、静态HTML+多React根的最佳实践判断 #

这种方式适合局部动态内容的简单场景（比如页面中某几个模块需要动态渲染），但不属于标准SSR方案：

• 优势：实现简单，无需服务器端复杂的JS执行逻辑。
• 劣势：首屏动态内容仍需客户端JS渲染，无法获得SSR的首屏加载速度、SEO友好等优势；多React根之间状态共享、路由管理会变得复杂，不利于大型应用维护。

如果你的应用需要完整的SSR能力，建议采用前面提到的标准SSR方案；如果只是局部动态内容，这种方式可以作为临时方案，但长期来看，统一用React的根组件管理更利于维护。

内容的提问来源于stack exchange，提问作者CuriousCrypto