🎨 Frontend Engineering · React Patterns

Draw the server/client component boundary

Decide what renders on the server versus client in React Server Components to minimize JavaScript shipped.

intermediate~30 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

1Default every component to server-rendered; add interactivity at the leaves
2Push 'use client' down to the smallest interactive subtree (buttons, inputs)
3Fetch data in server components; pass plain serializable props downward
4Never import server-only secrets from a client module, even indirectly
5Keep providers minimal: theme/auth wrappers are client, pages stay server
6Audit bundle after each feature: any client component over 15KB needs justification

Common Pitfalls

▲One 'use client' at page level dragging the whole tree into the bundle
▲Passing functions or class instances across the boundary

Success Signals

✓Client JS per route under 120KB gzipped
✓Zero hydration mismatch warnings

Commands

Install with skills CLI

$ npx skills add aniruddhaadak80/skills --skill react-patterns-server-client-boundary

Install globally

$ npx skills add aniruddhaadak80/skills --skill react-patterns-server-client-boundary -g

Tags

#react#nextjs#rsc#frontend-engineering#react-patterns

Install this skill

$ npx skills add aniruddhaadak80/skills --skill react-patterns-server-client-boundary -a opencode

SKILL.md

# Draw the server/client component boundary

> Decide what renders on the server versus client in React Server Components to minimize JavaScript shipped.

## When to Use This Skill

Decide what renders on the server versus client in React Server Components to minimize JavaScript shipped.

## Steps

1. Default every component to server-rendered; add interactivity at the leaves
2. Push 'use client' down to the smallest interactive subtree (buttons, inputs)
3. Fetch data in server components; pass plain serializable props downward
4. Never import server-only secrets from a client module, even indirectly
5. Keep providers minimal: theme/auth wrappers are client, pages stay server
6. Audit bundle after each feature: any client component over 15KB needs justification

## Common Pitfalls

- One 'use client' at page level dragging the whole tree into the bundle
- Passing functions or class instances across the boundary

View source on GitHub ↗

Choose between local state, lifted state, URL state, and stores by asking who needs the data and when.

🎨 Frontend Engineering·~25m

Open →

Design error, loading, and empty states firstfoundation

Treat non-happy paths as features: skeleton loaders, typed errors, retry affordances, useful empties.

🎨 Frontend Engineering·~20m