Server Component Fetch Self

Server components fetching their own API routes

infoPerformanceserver-component-fetch-self

Why this matters

A server component fetching its own API route makes a needless HTTP round trip to itself. The server component can call the same logic directly — it's already running on the server.

✗ Bad

// app/dashboard/page.tsx (server component)
export default async function Dashboard() {
  // Fetching your OWN API route from the server
  const res = await fetch("http://localhost:3000/api/stats");
  const stats = await res.json();
  return <div>{stats.total}</div>;
}

✓ Good

// app/dashboard/page.tsx (server component)
import { getStats } from "@/lib/stats";

export default async function Dashboard() {
  // Call the function directly — no HTTP round trip
  const stats = await getStats();
  return <div>{stats.total}</div>;
}

How to fix

Extract the logic from your API route into a shared function. Call it directly from server components instead of making an HTTP request to yourself.

All rules