skills.rest
Agentient
AgentientOFFICIAL
Explore all skills by this author →
GitHub

rsc-composition-patterns

Decide server versus client boundaries for React Server Components in Next.js 14+ apps.

2|1|Updated Jan 31, 2026
Search Tags:#react#next.js#architecture-patterns#server-components#server-first#client-boundaries
One-click install
npx skills add https://github.com/Agentient/vibekit --skill rsc-composition-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rsc-composition-patterns
Source: https://github.com/Agentient/vibekit/tree/main/plugins/frontend-tools/skills/rsc-composition-patterns
Command: npx skills add https://github.com/Agentient/vibekit --skill rsc-composition-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams decide where to render React components (server vs client) in Next.js 14+ by outlining patterns for Server Components, 'use client' boundaries, and inter-component composition, reducing guesswork during architecture planning.

Core Features & Use Cases

  • Server-first guidance: maps components to server or client rendering based on interactivity, data-fetching, and browser API requirements.
  • Composition patterns: demonstrates passing server-rendered content as children to client components and structuring boundaries to minimize client bundles.
  • Use Case: when designing a Next.js 14+ app, use these patterns to define where to render and how to compose components for optimal performance and UX.

Quick Start

Apply these patterns to decide server vs client boundaries in a Next.js 14+ application, and mark only interactive leaf components with 'use client'.

Frequently Asked Questions about rsc-composition-patterns

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

FAQPage Schema
How do I decide server vs client boundaries for React Server Components in Next.js 14?▼

Server vs client boundaries in Next.js 14 are decided by mapping components based on interactivity, data-fetching needs, and browser API requirements, marking only interactive leaf components with 'use client'.

Can I pass server-rendered content as children to client components in Next.js?▼

Passing server-rendered content as children to client components is supported through composition patterns that structure boundaries to minimize client bundles while passing serialized content.

When should I use 'use client' directives in my Next.js architecture?▼

Use 'use client' directives in Next.js architecture specifically for interactive leaf components that require browser APIs, state management, or event handlers, keeping the rest server-rendered.

What's the best way to structure React Server Component composition patterns to minimize client bundles?▼

The best way to structure React Server Component composition patterns is by applying a server-first approach, passing serialized server-rendered content as children to client components to minimize bundle size.

Does this approach to server-first architecture patterns work for all Next.js 14+ applications?▼

These server-first architecture patterns apply specifically to Next.js 14+ applications, guiding architecture decisions, component boundary mapping, and interactivity layering during design.

Related Skills

Explore More Software Engineering Skills→
januarfontijanuarfonti
10

rsc-data-optimizer

Convert client-side data fetching in Next.js to React Server Components.

Community
Intermediate
davepoondavepoon
3.3k

server-components

Guide Server vs Client Component decisions in Next.js apps.

Community
Advanced
AIDotNetAIDotNet
84

nextjs-app

Generate Next.js 14+ App Router components, API routes, and middleware.

Official
Intermediate
ZESCODEZESCODE

react-patterns

Standardize React 18 and 19 component composition, state management, and data fetching patterns.

Community
Advanced