react-server-components-framework

name	react-server-components-framework
license	MIT
compatibility	Claude Code 2.1.220+.
description	Use when building Next.js 16+ apps with React Server Components. Covers App Router, Cache Components (replacing experimental_ppr), streaming SSR, Server Actions, and React 19 patterns for server-first architecture.
context	fork
agent	frontend-ui-developer
version	1.5.0
author	OrchestKit
tags	["frontend","react","react-19.2","nextjs-16","server-components","streaming","cache-components","turbopack"]
user-invocable	false
disable-model-invocation	false
complexity	medium
persuasion-type	reference
targets	[{"library":"next.js","version":">=16.2.6"},{"library":"react","version":">=19.2.6"}]
metadata	{"category":"document-asset-creation"}
allowed-tools	["Read","Glob","Grep","WebFetch","WebSearch"]
path_patterns	["*.tsx","*.jsx","**/next.config.*","**/app/**/*.tsx"]

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, May 2026) — Turbopack is the default bundler (no --turbo flag needed), Server Fast Refresh is on by default, and the new cacheComponents config flag replaces the legacy experimental_ppr escape hatch. For AI-agent debugging Next.js ships Next DevTools MCP — wire npx -y next-devtools-mcp@latest into .mcp.json (it connects via the dev server's /_next/mcp endpoint) to inspect render trees and cache boundaries mid-session.

When to use this skill:

• Building Next.js 16+ applications with the App Router
• Designing component boundaries (Server vs Client Components)
• Implementing data fetching with caching and revalidation
• Creating mutations with Server Actions
• Optimizing performance with streaming and Suspense

---

Quick Reference

Server vs Client Components

Feature	Server Component	Client Component
Directive	None (default)	'use client'
Async/await	Yes	No
Hooks	No	Yes
Browser APIs	No	Yes
Database access	Yes	No
Client JS bundle	Zero	Ships to client

Key Rule: Server Components can render Client Components, but Client Components cannot directly import Server Components (use children prop instead).

Data Fetching Quick Reference

Next.js 16 Cache Components (Recommended):

import { cacheLife, cacheTag } from 'next/cache'

// Default — shared across all users (public CDN-cached)
  () {
  
  ()
  ()
    db..()
}



  () {
  
  ()
   
}



  () {
  
  ()
  ()
    (userId)
}


 { revalidateTag }  
(, )