vercel-react-best-practices

To avoid data fetching waterfalls in React Server Components, fetch data in parallel at the top level of the tree rather than sequentially awaiting nested component requests. This skill codifies rules for optimizing client/server data flow to reduce load times.

Optimizing bundling in Next.js involves avoiding barrel imports, enabling dynamic imports for lazy loading, and refining server/client data flows. This skill provides practical workflows to apply these patterns during code review and refactoring.

Using Suspense boundaries in Next.js allows you to stream page chunks and improve initial paint time by wrapping asynchronous components. This skill offers example-driven guidance for implementing Suspense and reducing client-server serialization across boundaries.

Use per-request React.cache in server components to deduplicate identical data fetches occurring within a single render pass. This skill helps enforce this pattern alongside mindful serialization across RSC boundaries during application refactoring.

Yes, this skill applies practical workflows for reviewing React components and Next.js pages to enforce performance patterns. It helps teams identify issues like improper data flows and inefficient bundling during code review.