RSC Data Fetching Optimizer

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) {
  const [ref, inView] = useInView();  // Client-side animation OK
  return <div ref={ref}>...</div>;
}

Step 3: Convert Page to Server Component

// 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} />;
}

Type Adapter Pattern

When DB types differ from frontend types:

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} />;
}

When to Keep Client-Side

Keep "use client" when:

• Real-time subscriptions (Supabase realtime)
• User-triggered fetching (search, filters, pagination)
• Data depends on client state (auth token, localStorage)
• Infinite scroll / load more patterns

Advanced Patterns

See references/patterns.md for:

• Parallel data fetching
• Streaming with Suspense
• Error boundaries
• Caching strategies
• Hybrid SSR + client patterns