react-server

React Server Components render on the server to reduce bundle size, while Client Components handle interactivity using the 'use client' directive. This Skill provides a decision framework to distinguish them and manage the serialization boundary effectively.

Fetch data directly within React Server Components to leverage the server's network proximity. This Skill demonstrates efficient data fetching patterns that eliminate client-server waterfalls and avoid sending large payloads to the browser.

Use the 'use server' directive to define Server Actions for handling data mutations and form submissions. This Skill explains how Server Actions enable secure client-side mutations without manually building API endpoints.

The serialization boundary restricts passing non-serializable values like functions from Server to Client Components. This Skill details what data structures are permitted and addresses common anti-patterns to prevent boundary violations.

React Server Components integrate with Suspense to stream asynchronous UI progressively. This Skill guides how to wrap slow data fetches in Suspense boundaries to improve user experience by showing immediate fallbacks.

Common anti-patterns include overusing 'use client', passing non-serializable data across boundaries, and client-side fetching when server-side fetching is available. This Skill provides a decision framework to avoid these architectural mistakes.