nextjs-react-best-practices

React & Next.js Performance Best Practices

Source: laguagu/claude-code-nextjs-skills — Vercel Engineering, 70 rules.

---

Priority Order

Priority	Category	Impact
1	Eliminating Waterfalls	CRITICAL
2	Bundle Size	CRITICAL
3	Server-side	HIGH
4	Client-side Data	MEDIUM-HIGH
5	Re-renders	MEDIUM
6	Rendering	MEDIUM
7	JavaScript	LOW-MEDIUM
8	Advanced	LOW

---

1. Eliminating Waterfalls (CRITICAL)

// ❌ Sequential (300ms)
const user = await getUser(id);
const posts = await getPosts(id);

// ✅ Parallel (100ms)
const [user, posts] = await Promise.all([getUser(id), getPosts(id)]);

// ✅ Start early, await late
const userPromise = getUser(id);
const postsPromise = getPosts(id);
const [user, posts] = await Promise.all([userPromise, postsPromise]);

// ✅ Check cheap sync conditions before awaiting
async function processOrder(orderId: string) {
  if (!orderId || !isValidUUID(orderId)) return null;  // cheap first
  return await fetchOrder(orderId);                    // expensive only if needed
}

// ✅ Suspense for streaming independent content
export default function Dashboard() {
  return (
    <>
      <Header />
      <Suspense fallback={<StatsSkeleton />}><Stats /></Suspense>
      <Suspense fallback={<ActivitySkeleton />}><RecentActivity /></Suspense>
    </>
  );
}

---

2. Bundle Size (CRITICAL)

// ❌ Barrel import — pulls entire tree
import { Button, Input, Modal } from '@/components';

// ✅ Direct import — tree-shaken
import { Button } from '@/components/ui/button';

// ✅ Dynamic import for heavy components
const Chart = dynamic(() => import('@/components/chart'), {
  loading: () => <Skeleton className="h-64" />,
  ssr: false,
});

// ✅ Defer third-party analytics after hydration
useEffect(() => {
  import('mixpanel-browser').then(({ default: mp }) => mp.init('TOKEN'));
}, []);

// ✅ Preload on hover for perceived performance
const handleMouseEnter = () => {
  router.prefetch(`/products/${slug}`);
};