Question 1

How do I eliminate async waterfalls in Next.js API routes?

Accepted Answer

Start independent operations immediately without awaiting them, then await the promises later. Use Promise.all() for fully independent fetches, or the better-all library for operations with partial dependencies, achieving 2-10x improvement.

Question 2

How to reduce React bundle size from barrel file imports?

Accepted Answer

Import directly from source files instead of barrel entry points that re-export thousands of modules. In Next.js 13.5+, use the optimizePackageImports config option to automatically transform imports for libraries like lucide-react and @mui/material.

Question 3

Does this guide cover React Server Components performance?

Accepted Answer

Yes, the server-side performance section covers RSC-specific issues including minimizing serialization at RSC boundaries, avoiding duplicate serialization in props, per-request deduplication with React.cache(), and avoiding shared module state for request data.

Question 4

When should I not use Suspense boundaries for data fetching?

Accepted Answer

Avoid Suspense when critical data drives layout decisions, for SEO-critical above-the-fold content, for small fast queries where overhead is not worth it, or when you want to prevent layout shift between loading and content states.

Question 5

Why do Server Actions need authentication checks inside the function?

Accepted Answer

Server Actions are exposed as public endpoints just like API routes and can be invoked directly. Middleware or layout guards alone are insufficient, so each action must verify authentication and authorization internally before performing mutations.

vercel-react-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-react-best-practices

Related Skills

react-patterns

optimize

react-reviewer

optimizing-with-react-compiler