Question 1

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

Accepted Answer

Start independent async operations immediately and await them together with Promise.all(), or use better-all for partial dependency chains. In components, use Suspense boundaries so the layout renders while data streams in.

Question 2

How to reduce bundle size in a React Next.js app?

Accepted Answer

Import directly from source files instead of barrel files like lucide-react or @mui/material entry points, and use next/dynamic to lazy-load heavy components. Next.js 13.5+ can automate this with the optimizePackageImports config option.

Question 3

Does React.cache() work with Next.js fetch requests?

Accepted Answer

Next.js automatically memoizes fetch calls with the same URL and options within a request, so React.cache() is unnecessary there. Use React.cache() for database queries, authentication checks, and other non-fetch async work.

Question 4

When should I not use Suspense boundaries for data fetching?

Accepted Answer

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, or when queries are small and fast. The trade-off is faster initial paint versus potential layout shift.

Question 5

Why does my React component re-render too often?

Accepted Answer

Common causes include subscribing to state only used in callbacks, missing memoization of expensive computations, and broad effect dependencies. Apply rules like functional setState, derived state during render, and useRef for transient values.

vercel-react-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-react-best-practices

Related Skills

senior-frontend

optimize

ESLint Setup

react-19