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

0•

Design Tools

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.

Key Features

01Implementation of Island Architecture to minimize hydration costs

02Advanced composition patterns for wrapping server components in client shells

030 GitHub stars

04Decision framework for Server vs. Client component selection

05Best practices for passing serializable data across the server-client boundary

06Performance-focused anti-pattern detection for Next.js App Router

Use Cases

01Migrating legacy React applications to the Next.js App Router architecture

02Structuring complex data-driven dashboards with mixed interactivity requirements

03Optimizing 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

Key Features

01Implementation of Island Architecture to minimize hydration costs

02Advanced composition patterns for wrapping server components in client shells

030 GitHub stars

04Decision framework for Server vs. Client component selection

05Best practices for passing serializable data across the server-client boundary

06Performance-focused anti-pattern detection for Next.js App Router

Use Cases

01Migrating legacy React applications to the Next.js App Router architecture

02Structuring complex data-driven dashboards with mixed interactivity requirements

03Optimizing 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