server-components

Files (1)

• SKILL.md

SKILL.md (first lines)

# React Server Components

RSC + Next.js App Router patterns for streaming, caching, and minimal client JS.

## RSC vs Client Components Decision Matrix

```
Use Server Component (default) when:
  - Fetching data from DB / API
  - Accessing backend resources (filesystem, secrets)
  - No interactivity (useState, useEffect, event listeners)
  - Heavy dependencies (no bundle cost)

Use Client Component ("use client") when:
  - useState / useReducer / useRef
  - useEffect / lifecycle hooks
  - Browser APIs (window, navigator, IntersectionObserver)
  - Event listeners (onClick, onChange)
  - Third-party client libraries (charts, drag-drop)

Rule: Push "use client" as LOW in the tree as possible.
```

## "use client" / "use server" Directives

```typescript
// app/dashboard/page.tsx — Server Component (no directive needed)
import { db } from '@/lib/db'
import { StatsCounter } from './stats-counter' // client component

export default async function DashboardPage() {
  const stats = await db.query.stats.findMany()
  // Can pass serializable props to client components
  return <StatsCounter initialCount={stats.length} />
}

// app/dashboard/stats-counter.tsx — Client Component
'use client'
import { useState } from 'react'

export function StatsCounter({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

// Server Action in separate file
// app/actions.ts
'use server'
export async function createItem(formData: FormData) {
  // runs on server, called from client
}
```

## Suspense Boundary Placement Strategy

```typescript
// Place Suspense around slow data — fast data renders immediately
export default async function Page() {
  const fastData = await db.query.config.findFirst()   // fast: cached

  return (
    <div>
      <Header config={fastData} />                      {/* instant */}

      <Suspense fallback={<StatsSkeleton />}>
        <SlowStats />                                   {/* streams in */}
      </Suspense>

      <Suspense fallback={<FeedSkeleton rows={5} />}>
        <ActivityFeed />                                {/* streams in */}
      </Suspense>
    </div>
  )
}

async function SlowStats() {
  const stats = await fetch('/api/stats', { cache: 'no-store' })
    .then(r => r.json())
  return <StatsGrid stats={stats} />
}
```

## Streaming SSR with loading.tsx

```
app/
  dashboard/
    page.tsx        ← async server component (data fetching)
    loading.tsx     ← shown while page.tsx is streaming
    error.tsx       ← shown if page.tsx throws
    layout.tsx      ← wraps all, always renders immediately
```

```typescript
// app/dashboard/loading.tsx — instant skeleton, no async needed
export default function Loading() {
  return (
    <div className="animate-pulse space-y-4">
      <div className="h-8 bg-gray-200 rounded w-1/3" />
      <div className="grid grid-cols-3 gap-4">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="h-24 bg-gray-200 rounded" />
        ))}
      </div>
    </div>
  )
}
```

## Partial Prerendering (PPR)

```typescript
// next.config.ts — enable PPR (Next.js 14+)
export default {
  experimental: { ppr: true },
}

// page.tsx — static shell + dynamic holes
import { Suspense } from 'react'

From vibeeval/vibecosystem, MIT.

More from vibeeval/vibecosystem