{"enrichment":{"faq":[{"a":"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.","q":"How do I build Next.js 16 apps with React Server Components?"},{"a":"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.","q":"What are Cache Components and how do they replace experimental_ppr?"},{"a":"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.","q":"How do Server Actions work for form handling in Next.js?"},{"a":"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.","q":"What's the migration path from Pages Router to App Router with async params?"},{"a":"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.","q":"How do Suspense and streaming optimize React Server Components performance?"},{"a":"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.","q":"When should I use Server Components versus Client Components?"}],"shadow_tags":["server-first-rendering","edge-caching-strategy","component-composition","async-data-patterns","bundler-configuration","form-mutations","hydration-management","route-optimization","state-management-server"],"summary_rewrite":"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."},"files":[{"bytes":9909,"path":"src/skills/react-server-components-framework/SKILL.md","sha256":"13b6ab751f30b37c2d072b783aa7e19d3fd21e6d2ff563f56029b4d65a0a31e9","url":"https://skillfed.io/files/yonatangross/orchestkit/react-server-components-framework/c5b1e838/SKILL.md"}],"id":"yonatangross/orchestkit/react-server-components-framework","links":{"html":"https://skillfed.io/yonatangross/orchestkit/react-server-components-framework","md":"https://skillfed.io/yonatangross/orchestkit/react-server-components-framework.md","repo":"https://github.com/yonatangross/orchestkit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":20,"language":"TypeScript","last_updated":"2026-07-28","license":"MIT","name":"react-server-components-framework","publisher":"yonatangross","stars":208},"relations":{"similar":[{"id":"giuseppe-trisciuoglio/developer-kit/nextjs-app-router"},{"id":"gocallum/nextjs16-agent-skills/nextjs16-skills"},{"id":"elophanto/EloPhanto/nextjs"},{"id":"PracticalSwan/agent-skills/nextjs-development"},{"id":"sangrokjung/claude-forge/cache-components"},{"id":"laguagu/claude-code-nextjs-skills/cache-components"},{"id":"joelhooks/joelclaw/nextjs-static-shells"},{"id":"mohamed-hossam1/nextjs-skills/nextjs-cache-architecture"},{"id":"pproenca/dot-skills/nextjs-ppr-patterns"},{"id":"sanity-io/next-sanity/next-cache-components"}]},"slug":{"owner":"yonatangross","repo":"orchestkit","skill":"react-server-components-framework"},"version":"c5b1e838"}