mcpField
R
rsc-data-optimizer

rsc-data-optimizer

github.com/julianromli开发21052 次安装2 天前更新
代码仓库

关于 rsc-data-optimizer

rsc-data-optimizer 是面向 React Server Component 应用开发者的数据加载优化技能。它指导将适合的客户端获取改为服务端渲染，同时为交互数据保留客户端组件。

主要功能

  1. 01检查客户端获取反模式
  2. 02选择服务端与客户端组件
  3. 03拆分交互式页面区块
  4. 04适配数据库与前端类型
  5. 05提供流式传输和缓存模式参考

适用场景

  1. 01查找客户端获取导致的加载指示器
  2. 02将页面初始数据获取移至服务端
  3. 03让搜索和分页继续在客户端运行

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/julianromli/ai-skills --skill rsc-data-optimizer

安装后在 Claude Code 中输入/rsc-data-optimizer确认已加载。

附带文件references/patterns.md

详细介绍

RSC 数据获取优化器

将缓慢的客户端数据获取优化为即时的服务端渲染。

快速诊断

在代码库中搜索以下反模式：

# Find client-side fetching patterns
rg -n "useEffect.*fetch|useState.*loading|useStore\(\)" --type tsx
rg -n '"use client"' app/ --type tsx

警示信号：

  • "use client" + useEffect + fetch() = 初始加载缓慢
  • 使用 useState(true) 设置 isLoading = 用户会看到加载动画
  • 使用 useStore() 或 useContext 获取页面初始数据 = 瀑布式获取

3 步转换工作流

步骤 1：确定数据需求

确定页面在初始渲染时需要哪些数据：

  • 静态数据／很少变化的数据 → 服务端组件（SSR）
  • 用户交互数据（筛选、搜索）→ 客户端组件
步骤 2：提取交互部分

将使用 useInView、useState、onClick 的部分移到单独的客户端组件中：

// components/data-section.tsx
"use client";

interface DataSectionProps {
  data: Item[];  // Receive data as props
}

export function DataSection({ data }: DataSectionProps) {
  const [ref, inView] = useInView();  // Client-side animation OK
  return <div ref={ref}>...</div>;
}
步骤 3：将页面转换为服务端组件
// app/page.tsx - NO "use client"
import { getData } from "@/lib/actions/data";
import { DataSection } from "@/components/data-section";

export default async function Page() {
  const data = await getData();  // Fetch on server
  return <DataSection data={data} />;
}

类型适配器模式

当数据库类型与前端类型不同时：

import type { Item as DBItem } from "@/lib/database.types";
import type { Item } from "@/lib/types";

function adaptDBToFrontend(db: DBItem): Item {
  return {
    id: db.id,
    name: db.name,
    description: db.description ?? "",
    createdAt: new Date(db.created_at),
  };
}

export default async function Page() {
  const dbItems = await getItems();
  const items = dbItems.map(adaptDBToFrontend);
  return <ItemList items={items} />;
}

何时保留客户端处理

在以下情况下保留 "use client"：

  • 实时订阅（Supabase 实时功能）
  • 用户触发的数据获取（搜索、筛选、分页）
  • 数据依赖客户端状态（身份验证令牌、localStorage）
  • 无限滚动／加载更多模式

高级模式

请参阅 references/patterns.md，了解：

  • 并行数据获取
  • 使用 Suspense 进行流式传输
  • 错误边界
  • 缓存策略
  • 混合 SSR + 客户端模式

评论

支持 Markdown