RSC Data Fetching Optimizer

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:

# 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:

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

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

export function DataSection({ data }: DataSectionProps) {