react-server-components

Render React components on the server to reduce client JavaScript bundle size.

1|Updated Jul 12, 2025

Search Tags:#react #data fetching #server components #bundle optimization #next.js app router #server rendering #client boundary

Ready to run

npx skills add https://github.com/ubay1/next15-starter --skill react-server-components-ubay1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-server-components
Source: https://github.com/ubay1/next15-starter/tree/main/.agents/skills/react-server-components
Command: npx skills add https://github.com/ubay1/next15-starter --skill react-server-components-ubay1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Server Components help you reduce client-side JavaScript bundle size by rendering data-fetching and UI on the server instead of shipping that component logic to the browser.

Core Features & Use Cases

Server-first rendering: Run data access and rendering on the server to achieve smaller client bundles and faster delivery of non-interactive UI.
Client interactivity via boundaries: Use Server Components by default, and add the 'use client' directive only where you need state, effects, or event handlers.
Next.js App Router fit: Use async components in the app directory for server data fetching without relying on getServerSideProps-style patterns.

Quick Start

Start by removing 'use client' from components that only fetch/format server data and render output, then add 'use client' back only to the smallest interactive child components that need state or event handlers.

Frequently Asked Questions about react-server-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I reduce client bundle size with React Server Components?▼

Yes, you can use React Server Components with Next.js App Router by leveraging async components in the app directory. This allows direct server data fetching without relying on traditional getServerSideProps-style patterns.

When should I add the 'use client' directive in Next.js App Router?▼

Add the 'use client' directive only to the smallest interactive child components that require client state, effects, or browser APIs. Keep all other data-fetching and formatting components as Server Components to minimize bundle size.

Does using server rendering for UI require getServerSideProps in Next.js?▼

No, using server rendering for UI with React Server Components does not require getServerSideProps. You can use async server rendering in the App Router for direct data access instead of relying on older patterns.

What is the best way to enforce client boundaries in React for bundle optimization?▼

The best way to enforce client boundaries for bundle optimization is to remove 'use client' from data-only components and add it back strictly to interactive elements needing event handlers or state, keeping the server component the default.

Why does my client bundle include non-interactive UI rendering logic?▼

Your client bundle includes non-interactive UI logic because components are defaulting to client-side rendering. Move data fetching and static rendering to Server Components to shift that logic to the server and reduce the shipped JavaScript.