skills.rest
davepoon
davepoonCOMMUNITY
Explore all skills by this author →
Website𝕏@davepoonGitHub

server-components

Guide Server vs Client Component decisions in Next.js apps.

3.3k|453|Updated Jul 25, 2025
Search Tags:#react#nextjs#app-router#server-components#client-components#composition-patterns#server-vs-client
One-click install
npx skills add https://github.com/davepoon/buildwithclaude --skill server-components-davepoon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: server-components
Source: https://github.com/davepoon/buildwithclaude/tree/main/plugins/nextjs-expert/skills/server-components
Command: npx skills add https://github.com/davepoon/buildwithclaude --skill server-components-davepoon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps developers understand when to use Server Components vs Client Components in Next.js, optimizing rendering decisions, performance, and security at the boundary.

Core Features & Use Cases

  • Clear guidance on when to apply Server Components (data access, security, reduced client JS) versus Client Components (state, interactivity, browser APIs).
  • Pattern-focused chapters on Server-Client composition (Children, Slots, Providers) and best practices for interleaving server and client boundaries.
  • Real-world usage scenarios across Next.js apps, such as dashboards, data-heavy pages, and interactive widgets, with decision criteria and tradeoffs.

Quick Start

Diagnose a Next.js UI to determine whether each component should be server or client, then implement with minimal client boundary surface area.

Frequently Asked Questions about server-components

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

FAQPage Schema
When should I use Server Components vs Client Components in Next.js App Router?▼

Use Next.js Server Components for data fetching, security, and reducing client JS, while Client Components handle state, interactivity, and browser APIs. The 'use client' directive establishes this boundary.

How do I compose Server and Client Components without breaking the Next.js App Router?▼

Compose Next.js Server and Client Components using patterns like Children, Slots, and Providers to interleave boundaries. These composition patterns minimize client surface area while maintaining interactivity.

What is the best way to minimize the client boundary surface area in a React application?▼

Minimize client boundary surface area by pushing 'use client' directives down to leaf components. Keep layout and data-fetching components as Server Components to optimize rendering and performance.

Does Next.js App Router allow passing functions as props from Server to Client Components?▼

Next.js App Router does not support passing functions from Server to Client Components. Use composition patterns like passing Client Components as children or slots through Server Components instead.

Why does my Next.js component throw an error when trying to use React state?▼

Next.js Server Components cannot use React state. You must add the 'use client' directive at the top of the file to convert it into a Client Component to enable hooks and interactivity.

How do I diagnose a Next.js UI to determine if a component should be server or client?▼

Diagnose a Next.js UI by checking if the component requires data access, security, or reduced client JS for Server Components, versus state, interactivity, or browser APIs for Client Components.

Related Skills

Explore More Software Engineering Skills→
thongdn-itthongdn-it
3

nextjs

Apply Next.js 16 App Router optimization guidelines for caching, server components, and routing.

Community
Advanced
patrickhaahrpatrickhaahr

vercel-react-best-practices

Identify and apply React/Next.js performance best practices for rendering, data fetching, and bundle size.

Community
Basic
Kgan01Kgan01
6

react-nextjs

Guide React and Next.js app building with App Router and Zustand.

Community
Intermediate
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate