How do I pass data from a Server Component to a Client Component?

Data can be passed as props, but it must be serializable (strings, numbers, simple objects) to cross the network boundary between server and client.

Why should I prefer Server Components over Client Components?

Server Components reduce client-side bundle size, improve SEO, and allow for faster initial page loads by rendering on the server without sending unnecessary JavaScript to the browser.

What happens if I import a Server Component into a Client Component?

Importing a Server Component into a Client Component is an anti-pattern that can cause errors; you should instead pass the Server Component as 'children' to the Client Component.

When is the 'use client' directive strictly necessary?

Use 'use client' only when you need React hooks like useState, event listeners like onClick, browser-only APIs like window, or custom hooks that depend on these features.

React Server Components Architect

Name: React Server Components Architect
Author: Agentient

byAgentient

0•

開発者ツール

Optimizes Next.js 14+ applications by implementing efficient React Server Components (RSC) architecture and composition boundaries.

The rsc-composition-patterns skill provides a comprehensive framework for building modern Next.js applications with a server-first mindset. It guides developers through the complex task of defining component boundaries, ensuring that interactivity is isolated to client-side 'leaf' components while maximizing server-side rendering. By following these proven patterns, users can significantly reduce JavaScript bundle sizes, improve SEO, and prevent common pitfalls like non-serializable prop errors or illegal component imports.

主な機能

01Strategic 'use client' boundary placement

02Next.js 14+ best practices and performance optimization

03Server-first component architecture guidance

04Anti-pattern detection for non-serializable props

05Hierarchical component composition via children pattern

060 GitHub stars

ユースケース

01Refactoring large client-side React apps to Next.js RSC architecture

02Establishing scalable frontend architecture patterns for development teams

03Optimizing web performance and Core Web Vitals for production apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit rsc-composition-patterns

For use in Claude.ai and ChatGPT

Download Skill