skills.rest
dr-code
dr-codeCOMMUNITY
Explore all skills by this author →
GitHub

server-components

Guide Server versus Client Component decisions in Next.js App Router projects.

Updated Mar 18, 2026
Search Tags:#nextjs#server-components#data-fetching#client-components#component-composition#react-server-components
One-click install
npx skills add https://github.com/dr-code/beacon --skill server-components-dr-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: server-components
Source: https://github.com/dr-code/beacon/tree/main/plugins/nextjs-expert/skills/server-components
Command: npx skills add https://github.com/dr-code/beacon --skill server-components-dr-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers and teams often struggle to decide which React components should run on the server versus the client, leading to oversized client bundles, improper access to server resources, or broken interactive behavior; this Skill clarifies the tradeoffs and best practices for Next.js App Router projects.

Core Features & Use Cases

  • Decision Guidance: Clear rules for when to use Server Components or mark a component with 'use client' for interactivity.
  • Composition Patterns: Practical patterns for passing server-rendered children into client boundaries, using slots, providers, and lifting state.
  • Data Fetching & Performance: Recommendations for async server components, parallel fetching, streaming with Suspense, caching, and serialization at boundaries.
  • Real-World Use Cases: Designing dashboards with mixed interactive parts, building product pages that fetch server data and expose small client controls, and safely accessing backend resources or secrets.

Quick Start

Ask whether a given component should be a Server Component or a Client Component based on whether it needs state, effects, event handlers, direct backend access, or access to browser APIs.

Frequently Asked Questions about server-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I decide between using Server Components and Client Components in Next.js App Router?▼

To decide on Server vs Client components, use Server Components by default for data fetching and static content, and mark components with 'use client' only when they require state, effects, event handlers, or direct browser API access.

How do I pass server-rendered children into client components in Next.js?▼

Pass server-rendered data as children props or slots into Client Components to maintain server benefits. This composition pattern allows Client Components to wrap static server content without breaking the server-client boundary serialization rules.

Can I fetch data directly in Next.js Server Components?▼

Yes, async Server Components support direct data fetching via parallel fetching strategies. This allows secure access to backend resources and secrets while streaming data to the client using Suspense boundaries for progressive page loading.

What are the serialization constraints at the Server and Client Component boundary?▼

Props passed from Server to Client Components must be fully serializable. Functions, class instances, and non-serializable objects cannot cross this boundary, requiring careful composition patterns like lifting state or using providers for interactive behavior.

When should I use the 'use client' directive in my React component tree?▼

Use the 'use client' directive to establish a client boundary when your component requires interactivity, state, effects, event handlers, or browser APIs. Define this boundary at the lowest possible level to keep client bundles small.

Related Skills

Explore More Software Engineering Skills→
renpayerorenpayero

nextjs-best-practices

Codify Next.js App Router server/client boundaries, data fetching, and routing patterns.

Community
Advanced
Kinfe123Kinfe123
35

data-fetching-patterns

Implement efficient data-fetching strategies for SSR, SSG, ISR, and client-side rendering.

Community
Advanced
yuhle-qugyuhle-qug

react-expert

Diagnose and fix React 18/19 component issues across hooks, state, and Server Components.

Community
Advanced
theslashdojotheslashdojo

pages-router

Automate Next.js Pages Router setup and data fetching with getStaticProps and getServerSideProps.

Official
Intermediate