Skillshub nextjs-server-components

RSC usage, ''use client'' directive, and Component Purity. Use when working with React Server Components or deciding where to place the ''use client'' boundary. (triggers: app/**/*.tsx, src/app/**/*.tsx, app/**/*.jsx, src/app/**/*.jsx, use client, Server Component, Client Component, hydration)

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ComeOnOliver/skillshub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/HoangNguyen0403/agent-skills-standard/nextjs-server-components" ~/.claude/skills/comeonoliver-skillshub-nextjs-server-components && rm -rf "$T"

manifest: skills/HoangNguyen0403/agent-skills-standard/nextjs-server-components/SKILL.md

source content

Server & Client Components

Priority: P0 (CRITICAL)

[!WARNING] If the project uses the
pages/
directory instead of the App Router, ignore this skill entirely.

Next.js (App Router) uses React Server Components (RSC) by default.

Implementation Guidelines

Next.js Default: Use React Server Components (RSC) for 90% of your UI. Leverage
```
async components
```
for direct data fetching.
Client Boundary: Only use the
```
'use client'
```
directive for interactivity (e.g.,
```
onClick
```
), hooks (
```
useState
```
,
```
useEffect
```
), or browser APIs. Place the boundary at the leaf nodes to maximise RSC benefits and server-side rendering.
Composition: Use
```
<ClientWrapper><ServerDataComponent /></ClientWrapper>
```
to pass Server Components as
```
children
```
to Client Components. Avoid Circular Dependencies between server and client. Direct database access:
```
await db.
```
queries inside async RSCs, and
```
await params
```
before accessing route segments.
Data Fetching: Use
```
fetch
```
with cache: 'no-store'
or revalidate: 0
to opt out of static rendering when needed.
Loading & UI: Use
```
Suspense
```
triggers around slow async components to enable Streaming and better UX. Use loading.tsx
for route-level loading states.
Serialization: Ensure all props passed from Server to Client are Serializable (No functions, Dates, or Classes).
Security: Never share secrets or server-only logic within Client Components. Use
```
server-only
```
package to enforce this.
Hydration: Server sends HTML + RSC payload (JSON); client hydrates only Client Components. Server Components produce zero JS in the client bundle — no useState/useEffect shipped to browser.
Server-in-Client: You cannot import a Server Component directly into a Client Component.
- Fix: Pass Server Component as
```
children
```
  prop to the Client Component. See Composition Example.

Anti-Patterns

No secrets in Client Components: Use
```
server-only
```
package to prevent accidental bundling.
No full DB objects passed to client: Minimize serialized props; pass IDs when possible.
No
useState
/
useEffect
in Server Components: These are Client Component-only hooks.
No
'use client'
at tree root: Push the boundary to leaf components.

References

Server/Client Composition Example