访问官网
GithubRSC 解析器
这是一个用于解析通过网络传输的 React 服务器组件 (RSC) 的工具。React 使用一种特定格式来表示组件/HTML 树或元数据，如所需的导入、悬停边界以及需要加载的 CSS/字体。
我开发这个工具是为了让你更容易理解数据并以可视化方式探索它。
对比
如何使用？
浏览器扩展
你可以在这里添加 Chrome 扩展。
npm 包
你也可以将解析器作为包添加到你的项目中。你将获得一个嵌入式面板组件，可以在 layout.tsx 中渲染。
首先，从 npm 安装 @rsc-parser/embedded，例如：yarn add @rsc-parser/embedded
然后你可以在 layout.tsx 中加载它，例如：
import { Suspense, lazy } from "react";
const RscDevtoolsPanel = lazy(() =>
import("@rsc-parser/embedded").then(module => ({
default: module.RscDevtoolsPanel,
})),
);
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
{/* 在这里使用任何你想要的条件或标志 */}
{process.env.NODE_ENV === "development" ? (
<Suspense>
<RscDevtoolsPanel />
</Suspense>
) : null}
</body>
</html>
);
网站
你还可以使用网站手动复制粘贴 RSC 有效载荷。
- 访问使用 NextJS App 路由或基于 React 服务器组件的网站。
- 打开开发者工具中的网络标签。
- 重新加载。
- 寻找 fetch 响应，有效载荷大致看起来像 JSON，但每行以
O:、1:I、b:或类似内容开头。 - 复制文本并粘贴到 https://rsc-parser.vercel.app/ 的表单中。
- 开始探索！
遇到崩溃？
请在 https://github.com/alvarlagerlof/rsc-parser/issues/new 上提出问题，并包含解析器无法处理的文本内容。
