vercel-react-best-practices

To fix data fetching waterfalls in Next.js and React, apply concrete rules for async parallelization and server/client fetching strategies. This eliminates sequential data dependencies and reduces payload size and time-to-interactive in production applications.

The best way to reduce bundle size in a React application is to apply targeted bundle import strategies and optimize server/client data fetching. Utilizing concrete examples of incorrect versus correct patterns helps eliminate oversized bundles and improve rendering performance.

You audit a Next.js codebase for performance regressions by running a structured rulebook against your code. This generates a prioritized list of 58 actionable fixes across 8 categories, including bundle size, server performance, and rendering optimizations.

Yes, this approach works for optimizing server actions and caching strategies. It provides operational guidance for server action security, caching mechanisms, and serialization to prevent excessive data transfer and improve server-side rendering performance.

Yes, you can use these rules for automated programmatic refactoring by LLMs. The rules are designed as an agent-friendly rulebook with clear incorrect versus correct patterns, specifically structured for automated code review and programmatic refactoring tasks.

You should avoid client-side data fetching in Next.js when it causes excessive serialization, oversized bundles, or rendering waterfalls. Transitioning to server-side fetching and caching strategies reduces payload size and improves time-to-interactive metrics.