Prefetching a link still results in a second blocking loader request

[ddehueck]

I'm using React Router as a...

framework

Reproduction

Stackblitz example: https://stackblitz.com/edit/github-bcauexzv?file=app%2Froutes%2Fhome.tsx

System Info

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 871.56 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.0 - ~/.nvm/versions/node/v20.19.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.0/bin/npm
    pnpm: 10.6.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 134.0.6998.89
    Edge: 134.0.3124.68
    Safari: 17.3.1
  npmPackages:
    @react-router/dev: ^7.3.0 => 7.3.0 
    @react-router/fs-routes: ^7.3.0 => 7.3.0 
    @react-router/node: ^7.3.0 => 7.3.0 
    @react-router/serve: ^7.3.0 => 7.3.0 
    react-router: ^7.3.0 => 7.3.0 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

I would expect no secondary loader request and an instant navigation as loader has already been called via the render prefetch.

As shown in: https://youtu.be/ZGxVXcYC6bU?t=190

Actual Behavior

1. On render a request to test.data is sent and resolved
2. On click of prefetched link another test.data request is sent and blocks navigation until resolved

[HerrBertling]

I just looked for issues with this to find an explanation as to why react-router behaves this way. I've implemented this fix from @sergiodxa: https://sergiodxa.com/tutorials/fix-double-data-request-when-prefetching-in-remix

That is working great for preventing this, at least for the intent variant of NavLink.

In the linked video, the Type is json but now this is text/x-script – could that be the reason why the browser skips the prefetch cache? Would love an explanation to understand this better. Anyways, setting the cache as per Sergio's article fixes this 😊

[a-kvashuk]

I just looked for issues with this to find an explanation as to why react-router behaves this way. I've implemented this fix from @sergiodxa: https://sergiodxa.com/tutorials/fix-double-data-request-when-prefetching-in-remix

That is working great for preventing this, at least for the intent variant of NavLink.

In the linked video, the Type is json but now this is text/x-script – could that be the reason why the browser skips the prefetch cache? Would love an explanation to understand this better. Anyways, setting the cache as per Sergio's article fixes this 😊

How did you achieve this working? Adding cache control header to loader does not affect anything for me. Could you provide working example please?

Sorry, I've just forgotten about exporting headers function. It seems all work as described)

[enure]

Here's a middleware that caches for 10s.

import { type unstable_MiddlewareFunction } from 'react-router';

// See https://sergiodxa.com/tutorials/fix-double-data-request-when-prefetching-in-remix
export const prefetchCacheMiddleware: unstable_MiddlewareFunction<
  Response
> = async ({ request }, next) => {
  const response = await next();

  const isGet = request.method.toLowerCase() === 'get';
  const purpose =
    request.headers.get('Purpose') ||
    request.headers.get('X-Purpose') ||
    request.headers.get('Sec-Purpose') ||
    request.headers.get('Sec-Fetch-Purpose') ||
    request.headers.get('Moz-Purpose');

  const isPrefetch = purpose?.toLowerCase() === 'prefetch';

  if (isGet && isPrefetch && !response.headers.has('Cache-Control')) {
    response.headers.set('Cache-Control', 'private, max-age=10');
  }

  return response;
};