前端----服务端渲染组件SSR

 

代码结构示例

服务端入口（Node.js）

// server.js
import { renderToPipeableStream } from 'react-dom/server';

app.get('/', (req, res) => {
  const { pipe } = renderToPipeableStream(
    <App />,
    { bootstrapScripts: ['/client.js'] } // 客户端入口
  );
  pipe(res);
});

客户端入口

// client.js
import { hydrateRoot } from 'react-dom/client';

hydrateRoot(
  document.getElementById('root'),
  <App /> // 相同的组件树
);

混合组件树

// App.js
import ServerComponent from './ServerComponent.server';
import ClientComponent from './ClientComponent.client';

export default function App() {
  return (
    <div>
      <ServerComponent /> {/* 服务端渲染 */}
      <ClientComponent /> {/* 客户端水合 */}
    </div>
  );
}

---

4. 性能优化特性

1. 零Bundle的客户端代码

   • 服务端组件代码不会发送到客户端，减少JS体积。

2. 自动代码拆分

   • 客户端组件按需加载（类似动态import()）。

3. 渐进式水合

   • 高优先级交互组件（如按钮）优先水合。

4. 流式SSR

   • 服务端通过renderToPipeableStream逐步发送HTML。

---

5. 与传统SSR的区别

特性	React 19 RSC	传统SSR
JS体积	仅客户端组件发送JS	全部组件发送JS
水合方式	选择性水合	全量水合
数据获取	服务端组件直接访问DB	需通过API层获取
SEO支持	完美支持（静态内容先行）	依赖水合完成

---

常见问题解答

Q1: 如何识别一个组件是服务端渲染的？
→ 检查文件扩展名（.server.js）或是否存在'use server'指令。

Q2: 服务端组件能使用React Hooks吗？
→ 不能。仅支持无状态组件和异步数据获取（如async/await）。

Q3: 客户端如何知道哪些组件需要水合？
→ React通过RSC数据流中的clientReference标记动态加载对应组件代码。

next.js, react19 常用