Question 1

How do I eliminate data fetching waterfalls in Next.js?

Accepted Answer

Execute independent async operations concurrently with Promise.all() instead of sequential awaits, and start promises early in API routes before awaiting them. For partial dependencies, use better-all or chain promises so each task starts at the earliest possible moment.

Question 2

How to reduce bundle size in a React application?

Accepted Answer

Avoid barrel file imports by importing directly from source files or using Next.js optimizePackageImports, lazy-load heavy components with next/dynamic, and defer non-critical third-party libraries like analytics until after hydration.

Question 3

Does this guide work with React Server Components?

Accepted Answer

Yes, it includes server-side rules specific to RSC such as minimizing serialization at RSC boundaries, per-request deduplication with React.cache(), avoiding shared module state for request data, and authenticating Server Actions like API routes.

Question 4

When should I not use Suspense boundaries for data fetching?

Accepted Answer

Avoid Suspense when data is critical for layout decisions, when content is SEO-critical above the fold, when queries are small and fast, or when you want to prevent layout shift between loading and loaded states.

Question 5

Why do barrel file imports slow down React builds?

Accepted Answer

Barrel files re-export thousands of modules, forcing 200-800ms import costs on every cold start since bundlers cannot tree-shake external libraries. Libraries like lucide-react and @mui/material can load thousands of unused modules from a single import.

vercel-react-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-react-best-practices

Related Skills

nextjs

performance-profiling

react-validation

astro