Next.js Performance Patterns I Use on Every Project

From RSC data-fetching to Partial Pre-Rendering — the practical performance tricks that shaved hundreds of milliseconds off my apps.

Next.js 15 ships with a lot of primitives for performance, but the defaults only get you so far. Here are the patterns I reach for on every production project.

1. Fetch at the leaf, not the root

With React Server Components you can fetch data right where it's consumed. No prop-drilling, no waterfall from a parent page component. Each leaf fetches exactly what it needs — and Next.js deduplicates identical fetch calls automatically.

// ✅ fetch inside the leaf RSC
async function UserCard({ id }: { id: string }) {
  const user = await getUser(id); // auto-deduped
  return <div>{user.name}</div>;
}

2. Suspense boundaries for streaming

Wrap slow data-fetching components in <Suspense> with a skeleton fallback. Next.js streams the shell to the browser instantly while the async content resolves server-side.

3. Route-segment-level caching

Set revalidate at the segment level rather than per-fetch. This gives you a single source of truth and avoids stale cache mismatches between fetches in the same segment.

// app/dashboard/layout.tsx
export const revalidate = 60; // revalidate every 60 seconds

“Performance isn't a feature — it's the foundation. Every millisecond you save is user trust you keep.”