CapsuleRSC：用于 React Server Components 的安全服务器/客户端边界强制

Source: Dev.to

概述

CapsuleRSC 是一个 极简框架，为 React Server Components（RSC）提供 安全的服务器/客户端边界，并具备强大的机械化保证。

它不依赖约定或开发者自律，而是通过 三层显式防御 来强制正确性：

• 类型层面 – TypeScript 类型在编译时阻止不可序列化的数据跨越边界
• 构建时 – ESLint 插件在开发期间检测边界违规
• 运行时 – assertSerializable 在执行时提供最后一道防线

为什么边界很重要

React Server Components 引入了一个新约束：数据必须以安全、可序列化的形式从服务器传递到客户端。

如果没有严格的边界，微妙但严重的问题会出现：

• 将函数传递给客户端组件会导致运行时错误
• Date 对象会悄然变成字符串
• 类实例会失去其方法
• 循环引用会导致序列化崩溃

CapsuleRSC 通过 在每一层强制边界 来防止这些问题，而不是假设开发者会记住规则。

核心原则

不要假设边界会被遵守——要机械化地强制执行它们。

CapsuleRSC 的存在就是要通过实现来 验证这一原则，而非仅停留在理论上。

CapsuleRSC 与 tRPC 的区别

CapsuleRSC 与 tRPC 解决 不同层面的不同问题。

• tRPC 关注 服务器与客户端之间的类型安全 API 通信。它假设执行边界已经存在（HTTP/RPC）。
• CapsuleRSC 关注 机械化地强制服务器/客户端执行边界本身，这在 React Server Components 中尤为脆弱。

简而言之：

• tRPC 关注 类型安全的通信。
• CapsuleRSC 关注 机械化强制的执行边界。

它们不是竞争关系，可以一起使用。

演示

作者作品集中提供了 CapsuleRSC 的实时演示。

• 服务器/客户端边界强制
• 序列化保证
• 基于能力的副作用

演示地址：
https://yuu1ch13-portfollio-tau-sepia.vercel.app/capsule-rsc

仓库

https://github.com/yuuichieguchi/capsule-rsc