server-components_skill

Overview

This skill explains React Server Components (RSC) patterns in Next.js App Router and when to choose server vs client components. It focuses on practical rules, composition patterns, and data-fetching strategies to reduce client bundle size and keep sensitive logic on the server. Use it to design component boundaries and implement efficient, interactive UIs with minimal client JavaScript.

How this skill works

The skill describes how Server Components run on the server by default and can fetch data or access backend resources directly, while Client Components require the 'use client' directive and handle state, effects, and browser APIs. It covers composition rules (server can import client, not vice versa), passing server children into client wrappers, async server components, parallel fetches, and streaming with Suspense. Examples show common patterns and anti-patterns to avoid bloating the client.

When to use it

• When you need to fetch data or access the database/filesystem directly
• When component has no interactivity or uses only rendering logic
• When you need client-side state, event handlers, or access to window/document
• When you want to minimize client-side bundle size and keep secrets on the server
• When composing complex UIs that mix server-rendered content with interactive controls

Best practices

• Make components Server by default; add 'use client' only when necessary
• Fetch data in async Server Components and pass plain serializable props to clients
• Never import a Server Component into a Client Component
• Serialize data across the boundary (no functions, classes, or Date objects without conversion)
• Use children and slot patterns to keep server-rendered content while enabling client interactivity

Example use cases

• Admin dashboard: fetch analytics on server, wrap interactive filters as Client Components
• Product catalog: server fetch product list, client-side filter and sorting UI
• Modal or toggle wrapper: a Client Component manages open state while rendering Server Component children
• Streaming feed: render header immediately, stream slow post list inside Suspense fallback
• Parallel data requirements: combine user, posts, and metrics with Promise.all in a Server Component