DataFetchingPatternsSPA
title: Data Fetching Patterns in Single-Page Applications radar_quadrant: Techniques radar_ring: Assess radar_position: inner
Data Fetching Patterns in Single-Page Applications is a named catalogue of five patterns for managing asynchronous data retrieval in frontend applications, published by Juntao QIU on martinfowler.com. The patterns address the recurring problem of coupling loading state, error handling, and UI structure in SPA components.
Asynchronous State Handler wraps each remote call in a dedicated handler module tracking status, result, and error. Components consume the handler output rather than managing fetch lifecycle directly.
Parallel Data Fetching fires independent requests simultaneously. Sequential fetching of independent resources is a common SPA performance antipattern; this pattern makes concurrent execution explicit.
Fallback Markup specifies placeholder UI declaratively using framework abstractions such as React Suspense. Loading and error states are defined once at the boundary, freeing component code to describe only the resolved data shape.
Code Splitting divides application bundles into on-demand chunks via dynamic imports, deferring non-critical code from the initial load.
Prefetching loads resources during idle time before the user navigates to them, converting anticipated latency into background work.
In practice these patterns combine. An application typically applies Asynchronous State Handler universally, uses Parallel Data Fetching for independent resources, Fallback Markup at route boundaries, Code Splitting per route, and Prefetching for high-probability navigation paths.
Placed in Techniques / Assess / inner.
The patterns are named, grounded in concrete React examples, and published on martinfowler.com — a high-signal platform. They address failure modes (sequential fetching, scattered loading state, monolithic bundles) that appear in any SPA regardless of framework. Inner position reflects that the patterns are immediately applicable to any active SPA project with no tooling cost: the only friction is identifying which patterns are already violated in the current codebase and applying them incrementally.
Applicability is scoped to SPA contexts. Projects that are server-rendered or use a meta-framework with built-in data loading (Next.js App Router, Remix, SvelteKit) may find most of these patterns already handled by the framework.
Trial gate: all five patterns applied (or explicitly ruled out) across at least one SPA route, with Parallel Data Fetching and Fallback Markup verified in production.
