server-components
React Server Components, Suspense boundaries, streaming SSR, partial prerendering patterns for Next.js App Router.
npx skills add vibeeval/vibecosystem --skill server-components --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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'
- RSC vs Client Components Decision Matrix
- "use client" / "use server" Directives
- Suspense Boundary Placement Strategy
- Streaming SSR with loading.tsx
- Partial Prerendering (PPR)
- Server Actions Patterns
- Data Fetching in RSC (async components)
- Cache and Revalidation
- Parallel Data Fetching in Layouts
- Error Boundary with error.tsx
- Common Pitfalls
What does the server-components skill do?
React Server Components, Suspense boundaries, streaming SSR, partial prerendering patterns for Next.js App Router.
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill server-components --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.