Where data fetching happens — and why it decides LCP

A blog homepage loads in 400ms on one app, 2100ms on another. Same CDN, same database, same React version. The only difference: where the data fetch happens.

The critical path from click to content

Every page load has a critical path — a chain of sequential round-trips the browser must complete before the main content becomes visible. Largest Contentful Paint (LCP) measures when that content appears. Every unnecessary round-trip adds 50–200ms on a fast network, 500ms+ on mobile.

With a pure client-rendered SPA the chain looks like:

1. Browser fetches index.html from CDN (~50ms)
2. Browser downloads JS bundle (~400–600ms parse + evaluate)
3. React mounts the component tree
4. useEffect fires, calls /api/data (~200ms)
5. React re-renders with data, LCP fires

Total: easily 800–2000ms on a fast connection, 3–5s on a slow one.

The four locations

Modern frameworks support four fetch locations:

Build time (SSG — static generation). Data is baked into HTML at build. Zero per-request fetch cost. Stale until next build. Use for content that changes hourly or less: blog posts, marketing pages, documentation.

Server at request time (SSR or Server Components). Fetch happens on the server while generating the HTML response. The browser receives HTML with data already inside. One effective round-trip. Next.js RSC async components, Remix loaders, and getServerSideProps all use this pattern.

Streaming server-side. Server sends HTML in chunks before all data is ready. Layout shell arrives in ~100ms; slower data sections stream in as they resolve. Each React Suspense boundary is independently streamable. The user sees content much sooner even when some sections take 500ms+ to fetch.

Client after mount (CSR). useEffect, useQuery, useSWR. Page mounts blank; data arrives after JS runs. Necessary for user-interactive flows — filters, real-time updates, anything that depends on user state. But wrong for the LCP element.

The restaurant metaphor

Client fetch is ordering at a restaurant where you sit down to an empty table, study the menu for two minutes, then wait for your food. Server fetch is calling ahead: the host takes your order, you sit down to food already on the table. Streaming is the appetiser arriving instantly while the main course finishes cooking. The total kitchen time is similar, but the perceived wait is radically shorter.