Skip to main content

Vercel React Performance Guidance

Apply Vercel React and Next.js performance guidance when writing, reviewing, or refactoring React, Next.js, data fetching, bundle, rendering, or JavaScript performance code

Source: .agents/rules/vercel-react-performance.mdc

Metadata​

  • name: vercel-react-performance
  • alwaysApply: true

Content​

Vercel React Performance Guidance

When the task touches frontend/React/Next work in src/ (TS/TSX components, pages, hooks, data fetching, imports/bundles, or performance review), follow:

  • .agents/references/coding-standard/vercel-react-best-practices/REPO-GUIDANCE.md (including the Pages Router section)
  • Relevant detailed files under .agents/references/coding-standard/vercel-react-best-practices/rules/

This repo uses Pages Router only. Interpret server rules via getStaticProps, getServerSideProps, and pages/api — do not recommend Server Actions, RSC, or src/app/ unless the user requests a migration.

Use it for:

  • New React components and Next.js pages (src/pages/).
  • getStaticProps, getServerSideProps, and src/pages/api handlers.
  • Client-side data fetching in components and hooks.
  • Bundle-size-sensitive changes such as imports, dynamic imports, and third-party libraries.
  • Rendering, re-render, hydration, and JavaScript hot-path performance review.

Repo rules still win when they are stricter or more specific. In particular:

  • Keep following .agents/rules/clean-react.mdc for unnecessary useEffect, unnecessary state, and memoization discipline.
  • Keep following .agents/rules/no-unnecessary-usecallback.mdc; do not add useCallback only because a generic performance checklist mentions stable callbacks.
  • Keep following .agents/rules/no-reexport-index-files.mdc; avoid barrel files in app code.
  • Use the repo's existing data-fetching and service patterns before introducing new libraries.