Vercel React Best PracticesVerified Creator

• references/
• SKILL.mdopen
• README.mdopen

name:

Vercel React Best Practices

slug:

vercel-react-best-practices

version:

v2.0.0

license:

MIT

author:

@vercel-labs

categories:

FrontendFullstackDevOps / CI/CD

tags:

#vercel#react#nextjs#performance#core-web-vitals

description:

React + Next.js performance — RSC patterns, partial pre-rendering, edge config, ISR, Core Web Vitals.

// What you can do with it

• Server vs Client boundaries — keep "use client" as low in the tree as possible; pass Server Components as children into client wrappers instead of importing them.
• Partial Prerendering — export const experimental_ppr = true so a static shell streams instantly while dynamic holes resolve inside .
• Caching & ISR — export const revalidate = N, fetch(url, { next: { revalidate, tags } }), and on-demand revalidateTag() / revalidatePath() in Server Actions or route handlers.
• Runtime selection — export const runtime = "edge" for low-latency, lightweight routes; Node for heavy deps or native modules.
• Assets — next/image with explicit sizes/priority, and next/font to self-host fonts and eliminate layout shift.
• CWV targets — LCP < 2.5s, INP < 200ms, CLS < 0.1, validated with @vercel/speed-insights.