Skip to content
AIQGM

The page was slow because it asked three questions one at a time

Server-rendered pages often wait on independent requests in sequence. Tracing makes it obvious; the fix is usually a few lines.

A dashboard took well over a second to render on the server. Nothing was individually slow. A trace showed three data calls lined up end to end, each waiting for the previous one even though none of them depended on another.

React Server Componenttsx
// Before: three round trips, one after another
const user   = await getUser(id);
const orders = await getOrders(id);
const plan   = await getPlan(id);

// After: independent requests start together, one round trip of waiting
const [user, orders, plan] = await Promise.all([
  getUser(id),
  getOrders(id),
  getPlan(id),
]);

Before · one await after another

710 ms

getUser()
getOrders()
getPlan()

After · Promise.all

320 ms

getUser()
getOrders()
getPlan()
0250500750 ms
Server render of one dashboard page. Three independent data calls, same code, different order of waiting. Timings are illustrative.

For data that's slower and less important, like a recent-activity panel, we move it into its own component behind <Suspense> so the rest of the page streams first instead of waiting for the slowest query.

This comes from our web applications work.

Tell us what you're working on.

A few paragraphs is plenty. We'll read it, reply by email, and if it looks like a fit, set up a 30-minute Google Meet with an engineer.