skills.rest
Fabric-Pro
Fabric-ProOFFICIAL
Explore all skills by this author →
WebsiteGitHub

nextjs-server-components

Implements React Server Components patterns in Next.js App Router applications.

3|Updated Aug 26, 2026
Search Tags:#performance#react#data fetching#nextjs#server components#app router#use client
One-click install
npx skills add https://github.com/Fabric-Pro/fabric-oss --skill nextjs-server-components-fabric-pro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-server-components
Source: https://github.com/Fabric-Pro/fabric-oss/tree/main/.cursor/skills/nextjs-server-components
Command: npx skills add https://github.com/Fabric-Pro/fabric-oss --skill nextjs-server-components-fabric-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers building Next.js 13+ applications often struggle to decide which components should render on the server versus the client, leading to bloated JavaScript bundles, slower page loads, and unnecessary API layers. ## Core Features & Use Cases - Server-First Data Fetching: Fetch data directly in async Server Components without creating API routes, accessing databases and secrets securely on the server. - Server/Client Composition Patterns: Pass Server Components as children into Client Components to keep interactive islands small while preserving server rendering. - Bundle Size Reduction: Keep components server-side by default and apply 'use client' only where hooks, browser APIs, or event handlers are required. - Use Case: When building a dashboard page, fetch the data in an async Server Component, render the static layout on the server, and wrap only the interactive chart or toggle in a Client Component. ## Quick Start Ask the assistant to refactor a Next.js page so data fetching happens in a Server Component and only interactive parts use 'use client'.

Frequently Asked Questions about nextjs-server-components

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

FAQPage Schema
How do I fetch data in Next.js Server Components?▼

Fetch data directly inside an async Server Component using await, without API routes or client-side hooks. Server Components run only on the server, so they can query databases and use secrets securely.

When should I use 'use client' in Next.js?▼

Add 'use client' only when a component needs useState, useEffect, useContext, browser APIs like localStorage, event handlers such as onClick, custom hooks, or third-party libraries that rely on React hooks.

Can a Client Component render a Server Component in Next.js?▼

Yes, by passing the Server Component as children or a prop to the Client Component. The children still render on the server while the Client Component handles interactivity around them.

Do Server Components reduce JavaScript bundle size?▼

Yes, Server Components ship zero client JavaScript by default since they render entirely on the server. This reduces bundle size, improves Largest Contentful Paint, and lowers Time to Interactive.

Why is my Server Component throwing an error when using useState?▼

React hooks like useState and useEffect are not allowed in Server Components. Move the interactive logic into a separate file marked with 'use client' and import it into the Server Component.

Related Skills

Explore More Software Engineering Skills→
ByeongminLeeByeongminLee
2

nextjs-app-router-fundamentals

Migrate Next.js 13+ projects from Pages Router to App Router conventions.

Community
Advanced
emilneuraz-aiemilneuraz-ai

performance

Identify and fix web performance bottlenecks using Lighthouse audits and Core Web Vitals metrics.

Community
Advanced
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate
PatternsDevPatternsDev
235

server-side-rendering

Render React pages on the server with Next.js data fetching.

Official
Advanced