rsc-data-optimizerlisted
Install: claude install-skill Durden7/ai-skills
# RSC Data Fetching Optimizer
Optimize slow client-side data fetching to instant server-side rendering.
## Quick Diagnosis
Search for these anti-patterns in the codebase:
```bash
# Find client-side fetching patterns
rg -n "useEffect.*fetch|useState.*loading|useStore\(\)" --type tsx
rg -n '"use client"' app/ --type tsx
```
**Red flags:**
- `"use client"` + `useEffect` + `fetch()` = slow initial load
- `useState(true)` for `isLoading` = user sees spinner
- `useStore()` or `useContext` for initial page data = waterfall fetching
## 3-Step Conversion Workflow
### Step 1: Identify Data Requirements
Determine what data the page needs on initial render:
- Static/rarely-changing data → **Server Component** (SSR)
- User-interactive data (filters, search) → **Client Component**
### Step 2: Extract Interactive Sections
Move sections with `useInView`, `useState`, `onClick` to separate Client Components:
```tsx
// 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>;
}
```
### Step 3: Convert Page to Server Component
```tsx
// 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 <