# Build React Server Components Apps

React Server Components change where data, rendering, and interactivity belong in a Next.js application. This skill gives Claude, Codex, and Claude Code practical patterns for App Router architecture, Server Actions, streaming, and migration work.

## Install

```bash
npx skillstore add ai agent hub/ariegoldkin-react-server-components-framework
```

## Metadata

- - Slug: ariegoldkin-react-server-components-framework
- - Version: 1.0.0
- - Author: AI Agent Hub
- - GitHub username: ArieGoldkin
- - License: MIT
- - Repository: https://github.com/ArieGoldkin/ai-agent-hub/tree/main/skills/react-server-components-framework
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: medium
- - Risk factors: scripts, network, env\_access, external\_commands
- - Quality score: 50
- - Quality tier: warning
- - Public page: https://skillstore.pages.dev/skills/ariegoldkin-react-server-components-framework
- - Manifest: https://skillstore.pages.dev/api/skills/ariegoldkin-react-server-components-framework/manifest

## Capabilities

- Explains when to use Server Components or Client Components in Next.js App Router projects.
- Provides templates for Server Components, Client Components, and Server Actions.
- Documents data fetching strategies with caching, revalidation, and route segment settings.
- Shows streaming patterns with Suspense and loading states.
- Covers advanced routing patterns, including parallel routes and intercepting routes.
- Includes migration guidance from the Pages Router to the App Router.

## Use Cases

- Plan an App Router Architecture: Map routes, layouts, data boundaries, and interactive islands before building a new Next.js application.
- Implement Server Actions Safely: Create mutation flows with validation, revalidation, redirects, and clear authorization checkpoints.
- Migrate Pages Router Features: Convert data fetching, metadata, layouts, and API route patterns into App Router equivalents.

## Prompt Templates

### Choose Component Boundaries

```
Review my Next.js page idea and decide which parts should be Server Components and which parts should be Client Components. Explain each boundary briefly.
```

### Design Data Fetching

```
Design the data fetching strategy for this App Router route. Include caching mode, revalidation, loading UI, and error handling.
```

### Create Server Actions

```
Create a Server Action plan for this form. Include validation, authorization, mutation steps, cache revalidation, and user-facing error states.
```

### Audit an RSC Migration

```
Audit this Pages Router feature for migration to the App Router. Identify required route, layout, metadata, data fetching, and client boundary changes.
```

## Limitations

- It is guidance and template content, not a runnable framework package.
- Examples use placeholder imports such as database and authentication helpers.
- It focuses on Next.js App Router patterns and does not cover every React framework.
- Some examples need project-specific security hardening before production use.

## Best Practices

- Keep Client Components small and place them near the interactive UI they control.
- Validate and authorize every Server Action before mutating data.
- Use Suspense boundaries around slow sections so the page can stream useful content early.

## Anti Patterns

- Do not mark entire pages as Client Components when only a small widget needs interactivity.
- Do not pass secrets or server-only objects into Client Component props.
- Do not copy examples into production without adding project-specific validation and authorization.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T10:26:53.88\+00:00
- - Summary: Static analysis reported many command, network, environment, and browser-storage patterns, but review found these are primarily markdown and TypeScript examples for Next.js development rather than hidden executable behavior. No prompt-injection text or confirmed malicious intent was found. The skill should publish with a warning because some copyable examples need stronger security caveats, especially stored HTML rendering and authorization checks for destructive actions.

## Stats

- - Views: 187
- - Downloads: 4
- - Favorites: 0
- - Popularity score: 0