vercel-react-best-practices

Apply structured best-practice heuristics to improve Next.js initial render performance and reduce bundle size by using dynamic imports, suspense boundaries, and careful prop handling to streamline rendering and avoid waterfalls.

For server-side rendering and data fetching in React, enforce per-request caching, safe data serialization across server/client boundaries, and suspense boundaries to ensure reliable UX and faster initial paint.

Yes, this React performance optimization approach applies to existing project refactors by applying structured rules to React components, Next.js pages, and data-fetching layers to improve Time to Interactive and enhance overall UX.

Dynamic imports and suspense boundaries reduce React bundle size by splitting code into smaller chunks and handling loading states gracefully, enabling faster initial paint and more reliable UX.

Worry about safe data serialization across server and client boundaries when passing props between server and client components in Next.js to avoid rendering errors and ensure reliable UX.