Question 1

How do I optimize React and Next.js performance?

Accepted Answer

Apply the prioritized rules in this guide, starting with CRITICAL categories: eliminate async waterfalls with Promise.all() and Suspense boundaries, then reduce bundle size with dynamic imports and direct imports instead of barrel files. Each rule includes incorrect and correct code examples.

Question 2

How to prevent waterfalls in Next.js API routes?

Accepted Answer

Start independent async operations immediately without awaiting them, then await the promises later. For example, call auth() and fetchConfig() before awaiting either, then use Promise.all() for remaining dependent fetches, yielding 2-10x improvement.

Question 3

Does this guide work with Next.js App Router and Server Components?

Accepted Answer

Yes, the rules specifically target Next.js App Router patterns including React Server Components, Server Actions, Suspense streaming, and RSC serialization. It covers server-specific concerns like React.cache() deduplication and avoiding shared module state across requests.

Question 4

When should I avoid barrel file imports in React?

Accepted Answer

Avoid barrel imports from libraries like lucide-react or @mui/material, which can re-export thousands of modules costing 200-800ms per cold start. In Next.js 13.5+, use optimizePackageImports; otherwise import directly from subpaths.

Question 5

What are the limitations of these performance rules?

Accepted Answer

Rules are prioritized by impact, so LOW-impact patterns like advanced hook techniques offer only incremental gains. Some patterns involve trade-offs, such as Suspense boundaries improving initial paint at the cost of potential layout shift.

vercel-react-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-react-best-practices

Related Skills

vercel-react-best-practices

web-performance-optimization

code-quality

chrome-devtools-specialist