Why shouldn't I put 'use client' at the top of my layout file?

Placing 'use client' in layouts or pages forces the entire route and all its child components to become part of the client bundle, negating the performance benefits of Server Components.

When should I use the 'use client' directive?

Apply 'use client' only when a component requires React state (useState), effects (useEffect), event handlers (onClick), or browser-specific APIs like window and localStorage.

Can I pass a Server Component as a child to a Client Component?

Yes. This is a primary composition pattern that allows you to keep the child component rendering on the server while the parent manages client-side interactivity.

What is Island Architecture in React?

It is a pattern where the majority of the page is rendered as static Server Components (the ocean), with small, isolated Client Components (islands) providing specific interactivity.

React RSC Architecture

Name: React RSC Architecture
Author: Agentient

byAgentient

デザインツール

Architects high-performance React applications using Server Components, Island Architecture, and optimal composition patterns.

概要

This skill provides a comprehensive framework for navigating the React Server Components (RSC) paradigm, helping developers decide precisely when to use the 'use client' directive. It emphasizes 'Island Architecture' by keeping client-side interactivity at the leaves of the component tree, ensures optimal data flow through serializable props, and implements advanced composition patterns to maintain server-first performance. By automating the architectural decision-making process for the Next.js App Router, it helps developers reduce bundle sizes and eliminate common performance anti-patterns.

主な機能

Implementation of Island Architecture to minimize hydration costs
Advanced composition patterns for wrapping server components in client shells
0 GitHub stars
Decision framework for Server vs. Client component selection
Best practices for passing serializable data across the server-client boundary
Performance-focused anti-pattern detection for Next.js App Router

ユースケース

Migrating legacy React applications to the Next.js App Router architecture
Structuring complex data-driven dashboards with mixed interactivity requirements
Optimizing web performance by reducing client-side JavaScript bundle sizes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit react-component-architecture-rsc

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要