Remix loaders forward Cache-Control, but stale-while-revalidate never auto-refreshes client data

Direct Answers

1. No documented mechanism notifies a mounted route when a browser or CDN background revalidation replaces a cached response. stale-while-revalidate is a cache-layer directive; its revalidation fetch is invisible to the running React application.
2. Intended pattern: trigger explicit refetches with useRevalidator (calling revalidator.revalidate()) on an interval, on visibilitychange/focus, or after mutations. Use useFetcher for targeted reloads. Remix's revalidation model is navigation- and action-driven, not cache-driven.
3. No first-class opt-in "live" revalidation tied to stale-while-revalidate exists in Remix v2. Manual revalidation is the expected long-term answer. Development has moved to React Router v7, which may introduce different data-refresh APIs.

Confirmed Facts vs. Likely Explanation

Confirmed (from Remix v2 docs and behavior)

• Caching is exposed only through the low-level Cache-Control header API on loader responses (via json()/defer() init or the headers export).
• useLoaderData reflects the loader result captured at navigation/render time.
• A background revalidation updates the HTTP cache, not the in-memory React tree.
• The page keeps showing the old payload until a navigation or explicit revalidation re-runs the loader.

Likely Explanation

The HTTP cache and Remix's client-side data layer operate independently. stale-while-revalidate tells caches serve stale content while you fetch a fresh copy in the background. That background fetch populates the cache for the next navigation or full page load. It does not emit an event, call a callback, or trigger a React re-render in the currently mounted route.

Practical Verification Steps

Run these in your Remix v2 app to confirm the behavior before committing to a strategy:

1. Create a test loader returning a timestamp with Cache-Control: max-age=0, stale-while-revalidate=60:

export async function loader() {
  return json({ time: new Date().toISOString() }, {
    headers: { 'Cache-Control': 'max-age=0, stale-while-revalidate=60' }
  });
}

2. Open DevTools Network tab, load the route, wait > max-age (immediate), then watch for a background revalidation request (grayed out, from disk cache then 200/304). Observe that useLoaderData output in the UI does not change.
3. Add useRevalidator with an interval and confirm the rendered timestamp updates after revalidate() fires:

import { useRevalidator } from '@remix-run/react';

export default function Component() {
  const { revalidate } = useRevalidator();
  const data = useLoaderData();

  useEffect(() => {
    const id = setInterval(() => revalidate(), 30_000);
    return () => clearInterval(id);
  }, [revalidate]);

  return Server time: {data.time};
}

Recommendation

Reserve stale-while-revalidate for data that is safe to remain static for the page's lifetime (it mainly helps subsequent full loads and CDN hits). For data that changes often and must refresh in place, implement useRevalidator polling or a server-push channel (WebSockets, SSE) rather than relying on HTTP cache directives.

One Missing Diagnostic Detail

Which Remix/React Router version is installed? Run npm ls @remix-run/react react-router or check package.json. If you are already on React Router v7 (or a v6.4+ data-router build), the answer may differ — newer versions expose useRevalidator with unstable_ cache APIs that could change the recommendation.