Vercel React Best Practices (Local/Docker)

Purpose

When to Apply

• Building or refactoring React components or Next.js pages
• Implementing Server Actions, Route Handlers, or data fetching
• Reducing startup time or memory footprint for local installs
• Debugging sluggish UI or long hydration times
• Reviewing code for performance regressions

Offline and Docker Focus

• Optimize for cold-start and steady-state responsiveness over SEO.
• Use in-process caches because the server process persists.
• Avoid sequential awaits even for local APIs or databases.
• Defer non-critical work until after render or after responses are sent.
• Minimize RSC props to reduce hydration and memory overhead.

Top Findings

• Eliminate async waterfalls by starting work early and awaiting late with

  Promise.all

  or

  better-all

  .
• Use Suspense boundaries to stream UI instead of blocking the whole page on data.
• Reduce initial load and memory via dynamic imports, conditional loading, and direct imports.
• Minimize RSC payloads; pass only fields used and avoid duplicating serialized data.
• Cache hot server work:

  React.cache

  per request and LRU for cross-request reuse.
• Reduce client work with memoized subtrees, lazy state init, transitions, and

  content-visibility

  for large lists.

Core Patterns

• async-parallel

  and

  async-api-routes

  to eliminate waterfalls

• async-suspense-boundaries

  to stream slow sections

• bundle-barrel-imports

  and

  bundle-dynamic-imports

  to reduce startup cost

• server-serialization

  and

  server-dedup-props

  to shrink RSC payloads

• server-cache-react

  and

  server-cache-lru

  to reuse hot work

• rerender-lazy-state-init

  and

  rerender-transitions

  for responsive UI

• rendering-content-visibility

  for long lists

• client-swr-dedup

  for fetch deduplication

Outputs

• REACT_PATTERNS.md

  for a condensed, offline-focused guide

• AGENT.md

  for the full compiled reference

Rule Categories by Priority

async-

bundle-

server-

client-

rerender-

rendering-

js-

advanced-

How to Use

REACT_PATTERNS.md

Full Compiled Document

AGENT.md