Preload Middleware

Purpose

Preload Middleware addresses the challenge of efficiently integrating preloaded data into the SWR data fetching lifecycle. While preloading allows data to be fetched ahead of time—before a component actually requests it—this middleware ensures that once the component mounts and calls the SWR hook, it transparently serves the preloaded data from cache instead of refetching it. This avoids redundant network requests and reduces loading waterfalls, improving the perceived performance of React applications using SWR.

Functionality

At its core, Preload Middleware intercepts the fetcher function used by the SWR hook. It checks if there is a preloaded request result available for the given key and, if so, returns that cached promise instead of invoking the fetcher again. This middleware seamlessly integrates with the SWR hook chain, allowing components to "consume" preloaded data without any special handling.

Key workflows include:

• Intercepting Fetch Requests:
  When a SWR hook initiates data fetching, the middleware serializes the key and checks the global preload cache for a stored response promise.

• Serving Cached Preloaded Data:
  If a preloaded promise exists for the key, it is returned immediately, and the preload cache entry is deleted to avoid reuse or stale data.

• Fallback to Normal Fetching:
  If no preloaded data is found, the original fetcher function is called to fetch fresh data.

• Special Handling for Infinite Loading Keys:
  Keys prefixed for infinite loading bypass this middleware’s preload cache check because infinite loading handles preloading internally.

By acting as a transparent middleware layer, it decouples preloading logic from components and core SWR hooks, preserving the declarative React data fetching model.

Integration with Parent Topic and Other Subtopics

This middleware builds upon the Preload Utility, which handles the actual preloading of data and populates the global preload cache. While the utility focuses on fetching and caching data ahead of time, the Preload Middleware ensures that once a SWR hook runs in a component, it can detect and use this preloaded data seamlessly.

Together, they form a cohesive preloading subsystem within the data fetching architecture:

• The Preload Utility fetches and stores data before component render.

• The Preload Middleware intercepts SWR fetch calls to serve this cached data.

• The Core Data Fetching hook (useSWR) benefits by integrating this middleware, avoiding duplicate fetches.

• Other subtopics like Infinite Loading handle their own preloading mechanisms but cooperate by excluding infinite keys from this middleware’s cache logic.

This layered design ensures that preloading is modular, optional, and compatible with other SWR features such as suspense, error handling, and revalidation.

Diagram

flowchart TD
  A[Component Calls useSWR Hook] --> B[Preload Middleware Intercepts Fetcher]
  B --> C{Is Key Preloaded?}
  C -->|Yes| D[Return Preloaded Promise]
  C -->|No| E[Call Original Fetcher]
  D --> F[Data Served from Preload Cache]
  E --> G[Fetch Data Normally]
  F --> H[SWR Cache Updated]
  G --> H
  H --> I[Component Renders with Data]

Code Highlights

The middleware wraps the fetcher function to check the preload cache:

const fetcher = fetcher_ && ((...args: any[]) => {
  const [key] = serialize(key_)
  const [, , , PRELOAD] = SWRGlobalState.get(cache) as GlobalState

  if (key.startsWith(INFINITE_PREFIX)) {
    return fetcher_(...args) // Infinite keys bypass preload cache
  }

  const req = PRELOAD[key]
  if (isUndefined(req)) return fetcher_(...args) // No preload found, fetch normally
  delete PRELOAD[key] // Consume preload cache once
  return req // Return preloaded promise
})

This design ensures that once preloaded data is consumed by a component, it is removed from the preload cache to prevent stale reuse, supporting fresh revalidation cycles afterward.

By efficiently bridging preloaded data and SWR’s reactive fetching, Preload Middleware enhances user experience with faster initial renders and minimal redundant fetching.