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.
// 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
After · Promise.all
320 ms
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.