Headers from header function are being returned on initial load but not on data?_routes=<route> loads

[scottdickerson]

I'm using React Router as a...

library

Reproduction

SSR site with two routes, and on each page <Link between them.

Add a headers function to set a cache-control header on the route.

export const loader = ({ request }: LoaderFunctionArgs) => {
  return data(
    {
     myData: 'data'
    },
    {
      headers: {
        'Cache-Control': determineCacheControlHeaderForAuction({ auction }),
      },
    }
  );
};

export const headers: HeadersFunction = ({ loaderHeaders }) => {
  return loaderHeaders;
};

On first load of the document it sends that header correctly.

However, when switching pages with the <Link when it sends the data?_routes XHR request to do the quick transition, the headers always come back no-store

I do have a function in entry.server.tsx to set cache-control in handleDataRequest to no-store.

export const handleDataRequest: HandleDataRequestFunction = response => {
  // Add headers
  response.headers.set('cache-control', 'no-store');
  return response;
};

In most cases this is what I want. However, in this specific case (because the data doesn't change very often and I'd like it to be cached by my CDN), I'm trying to override that header using the headers function for the two routes.

System Info

System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 2.01 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - ~/Documents/GitHub/phillips-public-remix/node_modules/.bin/npm
    pnpm: 9.15.4 - /opt/homebrew/bin/pnpm
    bun: 1.2.4 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 131.1.73.97
    Chrome: 134.0.6998.89
    Safari: 18.3
  npmPackages:
    @react-router/dev: ^7.0.0 => 7.1.3 
    @react-router/express: ^7.0.0 => 7.1.3 
    @react-router/node: ^7.0.0 => 7.1.3 
    @react-router/remix-routes-option-adapter: ^7.1.3 => 7.1.3 
    react-router: ^7.0.0 => 7.1.3 
    vite: ^5.4.14 => 5.4.14

Used Package Manager

npm

Expected Behavior

I expect the headers function in the route to set the headers on the ?data request just like it does for the initial HTML doc request.

http://localhost:3000/detail/test-artist/123456.data?_routes=routes%2F%28%24lang%29.detail.%28%24maker%29.%28%24seoName%29.%28%24auctionCode%29.%2

Actual Behavior

Only the initial doc load uses the headers function return value.

[xahy]

The same is the case for routes that only exports a loader with data. The headers is only passed when there is a default component that returns react element.

[brophdawg11]

I do have a function in entry.server.tsx to set cache-control in handleDataRequest to no-store.

I think this explains the behavior then - headers runs before handleDataRequest. Does the response passed to handleDataRequest have the proper header before you set (overwrite?) it?

[brophdawg11]

The same is the case for routes that only exports a loader with data. The headers is only passed when there is a default component that returns react element.

@xahy This is expected behavior - a route with only a loader and no UI component is a resource route and gets called directly and in isolation. The headers function is only used on document and data requests where multiple loaders run and the headers need to be merged together.

[xahy]

Thanks for the heads up @brophdawg11 🙏🏽
You have to return a Response object in order to apply headers.

It would be nice though to apply the exported headers if the return type of loaders is json.

[github-actions]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that aren't actionable. Please reach out if you have more information for us! 🙂