# Vercel React Best Practices

> Official engineering guidelines from Vercel for ensuring Next.js code uses proper caching, server components, and suspense boundaries.

- Skill: `mayurrathi/vercel-react-best-practices` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mayurrathi/vercel-react-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mayurrathi/vercel-react-best-practices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mayurrathi (https://skillmd.com/u/mayurrathi)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/mayurrathi/vercel-react-best-practices

---


# 2.2.1 Vercel React Best Practices

When building React and Next.js applications, strictly adhere to Vercel's official engineering guidelines to maximize performance and user experience.

## 1. React Server Components (RSC) Default
- **Default to Server:** Always use Server Components by default. Only add the `"use client"` directive when interactivity, hooks (useState, useEffect), or browser APIs are explicitly required.
- **Data Fetching:** Fetch data on the server component rather than the client whenever possible.

## 2. Next.js App Router Architecture
- **Colocation:** Keep components, styles, and tests close to the routes they are used in.
- **Layouts & Pages:** Utilize `layout.tsx` for shared UI across routes, and `page.tsx` for the unique route UI.

## 3. Caching & Data Mutation
- **Fetch Caching:** Utilize Next.js extended `fetch` API for granular cache control (`force-cache`, `no-store`, `revalidate`).
- **Server Actions:** Use Server Actions for data mutations instead of manual API routes for simpler client-to-server communication.

## 4. Suspense & Streaming
- **Suspense Boundaries:** Wrap slow-loading components in `<Suspense>` boundaries with meaningful fallback skeletons.
- **Granular Loading:** Don't block the entire page on data; stream UI components in as their data resolves.