读《How Imports Work in RSC》

Table of contents

RSC（React 18）为分界点，前后端 SSR 逻辑的变化

• 之前：通过 renderToString 将 React 组件渲染为 HTML 字符串，发送到客户端后用 hydrate 将这些 HTML 转为可交互的 React 组件。
• 之后：React Server Components（RSC）是一种新范式，让你用单一的代码表达既包含前端也包含后端的应用逻辑，由编译与框架自动协调跨端执行。

JavaScript 模块系统的设计

• JS 的模块是单例的，无论被导入多少次，只会执行一次并复用已导出的结果。

单例模块系统的优势

• 避免重复引用带来的体积膨胀。
• 模块顶层可以安全存放私有状态，多次导入不会重建状态。
• 心智模型简单：模块天然单例，若想只执行一次逻辑，写在顶层即可。

前端（浏览器）与后端（Node.js）如何共享模块

• 每端的模块系统各自保证模块唯一性，因此全栈项目中可共享纯逻辑模块。
• 但必然有些模块只适合执行于特定端环境，因此需要显式边界声明，防止错误导入；这种声明还能在构建或编译阶段捕获错误。

RSC 要解决的核心问题

• 即使有了边界声明，传统方案通常依赖人为约定（如全局挂载事件处理）来实现跨端协作，但这缺乏安全性和类型保障。
• “use client” 和 “use server” 指令旨在模块系统层面安全、类型化地显式声明跨端使用方式，让代码既能保证正确环境下运行，也能提升开发体验和安全性。