665,000+ skills indexed

djankiesCOMMUNITY

Explore all skills by this author →

Verified:Website GitHub

server-vs-client-boundaries

Classifies text and image inputs for NSFW and safety compliance.

Updated Nov 21, 2025

Search Tags:#architecture #react #data fetching #bundle size #server components #react 19 #use client #client components

One-click install

npx skills add https://github.com/djankies/claude-configs --skill server-vs-client-boundaries

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: server-vs-client-boundaries
Source: https://github.com/djankies/claude-configs/tree/main/react-19/concerns/components/skills/server-vs-client-boundaries
Command: npx skills add https://github.com/djankies/claude-configs --skill server-vs-client-boundaries

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Deciding when to use Server Components versus Client Components and effectively managing their interactions is crucial for optimal React 19 application architecture, performance, and bundle size. This Skill clarifies these boundaries.

Core Features & Use Cases

Server Components (Default): Understand how to leverage server-side rendering for data fetching, direct database access, and zero client-side JavaScript.
Client Components ('use client'): Learn when to use client-side rendering for interactivity, hooks, and browser APIs.
Composition Patterns: Master how Server Components can import Client Components, and how to pass Server Components as children to Client Components.
Avoid Common Mistakes: Identify and prevent anti-patterns like importing Server Components into Client Components.
Use Case: Architect a product detail page, identifying which parts should be Server Components (e.g., fetching product data, reviews) and which should be Client Components (e.g., an interactive "add to cart" button, image carousel).

Quick Start

Analyze the src/components/ProductPage.js file and identify which parts should be Server Components and which should be Client Components, adding 'use client' where necessary.

Frequently Asked Questions about server-vs-client-boundaries

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

FAQPage Schema

When should I use Server Components versus Client Components in React 19?▼

Server Components are the default in React 19 and should be used for data fetching, database access, and sensitive logic; Client Components, marked with 'use client', are needed for interactivity, hooks, and browser APIs. Choose Server Components first, then opt into Client Components only where required.

How do I structure Server and Client Components together in React 19?▼

Server Components can import Client Components directly. To pass Server Components to Client Components, compose them as children or props before the Client Component boundary. Never import Server Components into Client Components—this breaks the server-client boundary.

What's the benefit of using Server Components for data fetching?▼

Server Components eliminate client-side data fetching code, reduce bundle size by keeping server logic on the server, and enable direct database access without exposing credentials. This improves performance and security by rendering data server-side before sending HTML to the browser.

Do I need 'use client' for every interactive element in React 19?▼

No. Mark only components that directly use hooks, event handlers, or browser APIs with 'use client'. Parent Server Components can wrap multiple Client Components, so apply 'use client' at the smallest necessary scope to minimize client-side JavaScript.

How do Server Actions enable server-side logic from client contexts?▼

Server Actions allow Client Components to call server-side functions directly without building API endpoints. Define async functions in Server Components or files marked 'use server', then invoke them from Client Components to execute logic server-side and update state.

Can I use Server Components with Next.js and Remix?▼

Yes. React 19 Server Components integrate with frameworks like Next.js and Remix that implement React Server Component architecture. These frameworks provide routing, file-based structure, and server-side rendering infrastructure to support Server Component workflows.

Related Skills

Explore More Software Engineering Skills→

react-fundamentals-19

Teach React 19 fundamentals including Server Components, Server Actions, and the use() hook.

react-best-practices

Identify performance bottlenecks in React/Next.js projects and apply optimization rules.

patricio0312rev

react-server-components

Map React Server Components patterns into Next.js App Router projects.

frontend-framework-nextjs

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