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
Decision gist · record as of 2026-07-28
React Server Components Framework teaches Next.js 16+ patterns for server-first rendering with App Router, Server Actions, and streaming. 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.
Use it when
- react-server-components-framework covers Cache Components, the stable API in Next.js 16 that replaces the experimental PPR feature.
- react-server-components-framework explains Server Actions as functions that run on the server and handle form submissions and mutations.
Verify before relying
Read SKILL.md below before installing (28 files). Open directory: indexed for reading, not audited.
Install
yonatangross/orchestkit/react-server-components-framework · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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.
React Server Components Framework
Overview
React Server Components (RSC) enable server-first rendering with client-side interactivity. This skill covers Next.js 16.2 LTS App Router patterns, Server Components, Server Actions, and streaming.
> **Next.js 16.2.6 / React 19.2.6 (security release,
(truncated - see the full file via the links below)
File tree — 15 files
src/skills/react-server-components-framework/SKILL.md
src/skills/react-server-components-framework/checklists/rsc-implementation-checklist.md
src/skills/react-server-components-framework/examples/blog-app-example.tsx
src/skills/react-server-components-framework/references/cache-components.md
src/skills/react-server-components-framework/references/capability-details.md
src/skills/react-server-components-framework/references/client-components.md
src/skills/react-server-components-framework/references/component-patterns.md
src/skills/react-server-components-framework/references/data-fetching.md
src/skills/react-server-components-framework/references/migration-guide.md
src/skills/react-server-components-framework/references/nextjs-16-upgrade.md
src/skills/react-server-components-framework/references/react-19-patterns.md
src/skills/react-server-components-framework/references/routing-patterns.md
src/skills/react-server-components-framework/references/server-actions.md
src/skills/react-server-components-framework/references/server-components.md
src/skills/react-server-components-framework/references/streaming-patterns.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn React Server Components patterns for Next.js 16+ app development”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master full-stack Next.js 16+ development with App Router, Server Components, and TypeScript. This skill covers routing patterns, data fetching with the `use cache` directive, Server Actions, ISR/SSR/SSG strategies, Turbopack optimization, and MCP devtools integration for modern React 19+ architectures.
This skill equips you with patterns and code examples for Next.js 16+ App Router development, covering Server and Client Components, Server Actions for form handling, Route Handlers for APIs, and the new async APIs. Use it when setting up projects with App Router, configuring caching with the "use cache" directive, building parallel or intercepting routes, or migrating from middleware.ts to proxy.ts.
Master Next.js 15+ development with App Router architecture, Server Components, and advanced patterns like Partial Prerendering. This skill covers file-based routing, Server Actions, caching strategies, and React 19 features to optimize performance and developer experience. Learn streaming, error boundaries, and production-ready patterns for modern web applications.
Master Next.js 16's App Router with patterns for Server Components, Server Actions, and the new "use cache" directive. This skill covers critical breaking changes—async params, proxy.ts migration, and required default.js in parallel routes—plus caching APIs and React 19.2 features to optimize performance and prevent common errors.
A reference skill covering Next.js 16 essentials: upgrade procedures, new caching APIs with the `"use cache"` directive, Turbopack as the stable default bundler, and key breaking changes around async Request APIs. Includes links to official docs, release notes, and practical migration guidance for TypeScript projects.
A comprehensive reference for Next.js 16 covering upgrade procedures, new features like Cache Components and DevTools MCP, and critical breaking changes. Includes Turbopack migration details, caching API signatures, and verification checklists for safe deployments.
More skills cache-components (MIT) · cache-components (MIT) · nextjs (MIT) · nextjs-app-router-expert (MIT) · nextjs-ppr-patterns (MIT) · nextjs-cache-architecture (MIT) · Nextjs 16 Complete Guide (unlicensed) · Nextjs Validator (unlicensed)