server-vs-client-boundaries

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.