一、核型概念

1. 环境差异

• Node.js ： 传统服务端渲染（有完整的 Node API）
• Edge Runtime ： 轻量级边缘计算环境（如 Vercel Edge、 cloudflare Workers）
• Bun ： 新兴 JS 运行时
• Browser ： 客户端浏览器环境
• React Server Components(RSC) ： React 服务端组件专用环境

2. 渲染模式

• SSR(Server-Side Rendering) ： 动态服务端渲染（server 标识）
• SSG(Static Site Generation) ： 静态生成（static 标识）
• RSC(React Server Components) ： 服务端组件流式渲染

二、优点

分类	目的
多环境	兼容 Node.js/Edge/Bun/Browser 等运行时
多模式	分离 SSR/SSG/RSC 的渲染逻辑
性能	精简客户端 bundle ，避免冗余代码
扩展性	便于支持新运行时或渲染策略

• 环境适配 ：
  • Edge Runtime/Bun 不支持 Node.js API (如 Buffer) ，需定制实现
  • 浏览器环境需避免使用 Node.js 依赖
• 性能优化 ：
  • 按需加载： 避免向客户端发送服务器专用代码
  • Tree SHaking： 打包工具可剔除未使用的环境代码
• 渲染模式隔离 ：
  • SSR 需要处理流式传输、水合（hydration）
  • SSG 需预渲染静态 HTML
  • RSC 需支持组件级流式渲染和共享状态

---

---

📄️ index.js

react dom 的默认入口

📄️ client

客户端入口

📄️ client.react-server

客户端的服务端渲染时，直接报错

📄️ profiling

性能分析

📄️ profiling.react-server

在服务端渲染时的性能分析，但是又不允许在服务端渲染使用性能分析

📄️ react-dom.react-server

react dom 服务端渲染

📄️ server

服务端渲染通用入口（默认 Node.js 环境）

📄️ server.browser

服务端渲染浏览器部分，常用于开发环境中浏览器端调试 SSR 逻辑或其他特殊的同构场景

📄️ server.bun

适配 bun 运行时的 SSR

📄️ server.edge

适配 Edge runtime 的 SSR （无 Node API 限制）

📄️ server.node

显式执行 Node.js 环境的 SSR 实现

📄️ server.react-server

支持 React Server Components (RSC) 的 SSR。但是服务器渲染怎么能支持组件呢，直接报错

📄️ static

通用静态生成入口（Node.js 环境）

📄️ static.browser

在浏览器中模拟 SSG 环境

📄️ static.edge

适配 Edge Runtime 的 SSG

📄️ static.node

显式指定 Node.js 环境的 SSG

📄️ static.react-server

支持 RSC 的静态生成（实际是不支持，调用即报错）

📄️ test-utils

通用测试工具

📄️ unstable testing

不稳定测试工具（实验性功能）