react-server-components-framework

This skill covers React Server Components patterns for Next.js 16+ applications, including App Router setup, component boundary design, and data fetching with the new cache components API. Learn Server Actions for mutations, streaming with Suspense, and React 19 patterns for building performant server-first apps. Includes migration guidance, best practices, and reference templates.

React Server Components Framework teaches Next.js 16+ patterns for server-first rendering with App Router, Server Actions, and streaming.

AI-generated summary based on this skill's SKILL.md

★ 208 ⁮ 20 MIT updated 2026-07-28 by yonatangross

Install

yonatangross/orchestkit/react-server-components-framework · repository language: TypeScript

Manual (git clone) CLI (skillfed)

git clone https://github.com/yonatangross/orchestkit
cp -r orchestkit/src/skills/react-server-components-framework ~/.claude/skills/react-server-components-framework

npx skillfed install yonatangross/orchestkit/react-server-components-framework

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How do I build Next.js 16 apps with React Server Components?

react-server-components-framework teaches you to build Next.js 16+ applications using React Server Components as the foundation. Start by setting up the App Router, then define component boundaries between server and client components. Server Components handle data fetching and sensitive operations, while Client Components manage interactivity. Use the new cache components API for caching and streaming responses with Suspense boundaries to optimize performance and deliver content progressively to users.

What are Cache Components and how do they replace experimental_ppr?

react-server-components-framework covers Cache Components, the stable API in Next.js 16 that replaces the experimental PPR feature. Cache Components let you control caching behavior with cacheLife and cacheTag properties, enabling fine-grained revalidation strategies. They work alongside Server Components to cache computed results and streaming responses, reducing server load and improving time-to-first-byte. This approach is more predictable and production-ready than the previous experimental implementation.

How do Server Actions work for form handling in Next.js?

react-server-components-framework explains Server Actions as functions that run on the server and handle form submissions and mutations directly. Define them with the 'use server' directive, then call them from Client Components or forms. Server Actions automatically handle serialization, provide type safety, and can access databases and APIs securely. Include validation logic server-side, return results or errors to the client, and leverage them for progressive enhancement without exposing sensitive operations to the browser.

What's the migration path from Pages Router to App Router with async params?

react-server-components-framework guides you through migrating from Pages Router to App Router, with special attention to async params in Next.js 16. Replace page files with the new file structure, convert getServerSideProps and getStaticProps logic into Server Components with direct data fetching. Use async params in layout.tsx and page.tsx to access route parameters, handle cookies and headers via the new APIs, and gradually move Client Components into the component tree while keeping data fetching at the top level.

How do Suspense and streaming optimize React Server Components performance?

react-server-components-framework demonstrates using Suspense boundaries to stream Server Components progressively. Wrap slow data fetches in Suspense with fallback UI, allowing the browser to render faster content immediately while background queries complete. This pattern reduces time-to-interactive and improves perceived performance. Combine with Cache Components and cacheTag strategies to avoid redundant fetches, and leverage React 19's streaming capabilities to send HTML chunks as they're ready rather than waiting for the entire page.

When should I use Server Components versus Client Components?

react-server-components-framework recommends using Server Components by default for data fetching, database queries, and sensitive logic like API keys. Use Client Components only for interactivity: forms, event listeners, hooks like useState, and browser APIs. Server Components reduce JavaScript sent to the browser, improve security, and simplify data access. Place Client Components as deep in the tree as possible to keep most of your app on the server, following React 19 and Next.js 16 best practices for optimal performance and maintainability.

SKILL.md

rendered from the published skill — quoted content, verbatim