Data Access in Server Components

## The shape this replaces The pattern most engineers arrive with looks like this: a component mounts, an effect fires, the browser calls `/api/orders`, that endpoint opens a database connection, runs the query, serializes rows to JSON, and sends them back; the component calls `setState` and finally paints. Every one of those steps is a thing you had to build and maintain — an endpoint URL, a JSON contract, an `isLoading` flag, an `error` flag, and a second copy of the row type on the client. And the data only starts loading *after* the JavaScript bundle has downloaded, parsed and hydrated. ## What the App Router does instead In the App Router the default is inverted. A module under `app/` is server-side unless something pulls it into a client entry point, which is what `'use client'` creates. Because the component renders only on the server, it may be declared `async` and `await` anything the server can do — an ORM call, a database driver, an internal SDK, the filesystem. ```tsx // app/orders/page.tsx — no 'use client' anywhere above it import { db } from '@/lib/db' export default async function OrdersPage() { const orders = await db.order.findMany({ take: 20 }) return <ul>{orders.map(o => <li key={o.id}>{o.total}</li>)}</ul> } ``` There is no `/api/orders`. There is no `fetch`. The data and the markup that displays it are produced in one pass, in one place. ## What actually reaches the browser Two things, and neither is your query. On a first load the response is streamed HTML — the finished list — plus the RSC payload, a serialized description of the rendered tree that React uses to reconcile on the client. On a subsequent client-side navigation to that route, Next requests only the RSC payload for the new segment; no HTML document is fetched and no JSON API is involved. What does *not* reach the browser is the interesting half: the query text, the ORM, the database driver, and the credential the driver used. Those modules are imported by a server module graph only, so they are never part of a client bundle. This is why importing a Node-only package in `page.tsx` does not break the browser build. ## Where loading and error state went They became file conventions rather than component state. A `loading` file in the segment supplies pending UI while the segment's server work is in flight, and an `error` file catches a throw. You are no longer writing `if (isLoading) return <Spinner/>` inside the component that also owns the data, because the component never exists in a pending state on the client — it either rendered or it did not. ## Per-component, not per-page The removal is not only at the page level. Any Server Component in the tree can fetch what it alone needs, so a sidebar component queries its own counts and a table component queries its own rows, with no prop drilling from a single top-level loader and no `getServerSideProps`-style single entry point for the whole route. Data access sits next to the markup that consumes it. ## What it does not remove Route handlers are still needed for consumers that are not this app: webhooks, third-party clients, mobile apps, and anything that needs a stable HTTP surface. Mutations are not covered by this at all — reading is what a Server Component does; writing goes through a Server Action or a route handler. And data that must change in response to interaction without a navigation still needs a client-side path. ## The two traps The first is adding `'use client'` to `page.tsx` because something inside it needs interactivity — that pulls the whole page into the browser graph and the direct `await` stops being legal. The fix is to keep the interactive part in its own client component and leave the page on the server. The second is calling your own API from the server: `await fetch('http://localhost:3000/api/orders')` inside a Server Component. That works, but it pays for an extra HTTP hop out of the process and back in, forces you to know an absolute URL in every environment, and gives up the direct database access that was the point. If the component is already on the server, call the data source, not your own endpoint.