Waterfall means request B starts only after A completes. Parallel means simultaneous starts. SPAs often waterfall inside useEffect chains: load user, then load settings, then load dashboard. Even with HTTP/2, latency adds serially.
\n\nNetwork panel shows green parallel bars; architecture can still be serial logic.
\n\nDNS prefetch and preconnect for API host on HTML shell saves RTT on first client fetch after hydration. GraphQL DataLoader pattern on server removes N+1 behind single query appearance.
\n\nconst [user, posts] = await Promise.all([\n fetch('/api/user').then((r) => r.json()),\n fetch('/api/posts').then((r) => r.json()),\n]);Nested components each fetch on mount. Parent passes id down, child fetches details. I lift fetches to route loaders or one parent with Promise.all. GraphQL without batching resolvers can N+1 the server while looking one query on wire.
\n\nAwait in loops is the async sin. Map to concurrent promises or server-side join.
\n\nHTTP/3 changes connection behavior; serial chains still hurt latency math regardless of protocol. Browser connection limit per host still matters on HTTP/1.1 legacy proxies.
\n\nOne endpoint returning dashboard DTO beats six microservices called from browser unless CDN caches each independently with long TTL. BFF aggregates for read-heavy views.
\n\nPrefetch on link hover helps secondary navigation when aggregation is impossible short term.
\n\nService worker stale-while-revalidate can mask waterfall on repeat visits but first visit still matters for SEO. Retry with exponential backoff on 503 must not amplify thundering herd on recovering API.
\n\nStale-while-revalidate in service workers or CDN for semi-static JSON. SWR and TanStack Query dedupe in-flight requests on client. Without cache, parallel refetch on remount wastes bandwidth.
\n\nAuth endpoints opt out; public config and feature flags can cache short.
\n\nBatching REST with _batch query param is ugly but worked on legacy APIs I could not merge. Client-side ORM cache is not substitute for server join when privacy scopes differ per role.
\n\nEarly hints and preconnect for API origins on marketing pages that call CMS. Compression bro preferred. Keep cookies off API subdomain when possible to shrink headers.
\n\nPagination defaults that return huge JSON payloads hurt more than waterfall sometimes; trim fields.
\n\nOpenTelemetry trace across browser fetch and server span shows serial gaps clearly for stakeholder demos. Upload progress bars need XHR or fetch stream; parallel download does not help uploads.
\n\nIf data changes hourly, fetch at build and revalidate on webhook. Zero client waterfall on first paint. This site prefers static journal HTML plus enhancement for that reason.
\n\nMobile networks penalize many small JSON calls more than one medium payload on high latency links.
\n\nSpeculation rules API prerender on hover is emerging option for doc sites with stable URLs.
\n\nExport HAR from slow load. I mark serial chains in red and propose one aggregated endpoint or loader refactor. Waterfalls are logic bugs visible in DevTools if you know where to look.
\n\nI set fetch priority high only for true critical JSON, low for analytics config.
\n\nWaterfall in SSR data loaders shows in server logs as serial await; fix there first. For a related angle I keep coming back to, see API Rate Limiting Patterns Frontends Depend On.
","tags":["fetch","waterfall","network"],"views":59}