server-components

The server-components skill provides expert-level architectural guidance for developers working with the Next.js App Router. It is designed to help users navigate the nuanced differences between React Server Components (RSC) and Client Components. By understanding the 'client boundary' enforced by the 'use client' directive, developers can optimize their applications for performance, security, and bundle size. This skill assists in determining the correct placement of components, managing async data fetching, and implementing advanced composition patterns like wrapping server-rendered children within interactive client-side wrappers. Users will receive clear rules on when to favor server-side execution for database access and secrets management versus client-side execution for stateful interactions, browser APIs, and event handling. Key capabilities include architectural review for RSC, identification of common mistakes like importing server logic into client bundles, and best practices for streaming with Suspense and parallel data fetching. Typical use cases involve migrating older patterns to the App Router, debugging hydration or boundary issues, and designing efficient component hierarchies that minimize client-side JavaScript. Practical inputs include component file paths or snippets, while outputs provide refactored code patterns, structural diagrams, and explanations of rendering behaviors. Constraints include following Next.js serialization rules, avoiding the unnecessary use of 'use client', and ensuring correct data flow across the server-client divide.

• Expert guidance on the React Server Components mental model and client boundary management.

• Identification of appropriate use cases for 'use client' vs default server components.

• Advanced composition strategies including children-as-server-components and slot-based layouts.

• Data fetching optimization techniques including async server functions, parallel fetching, and Suspense streaming.

• Architectural troubleshooting for Next.js App Router applications to reduce bundle size and enhance performance.

• Best practices for keeping sensitive data (API keys, database logic) exclusively on the server.

• Use this skill when initiating new page or layout design in Next.js.

• Consult this skill if encountering hydration errors or improper directive usage.

• Apply these patterns when optimizing web vitals by offloading heavy logic to the server.

• Leverage the provided composition patterns to build flexible, interactive interfaces without sacrificing performance.