How to set cache-control for dataRequests per route?

[gopeter]

So I have a route like /en/foobar where I return a loader and a headers functions. I want to cache this for 60 seconds in the CDN. Now I want to have /en/signup which I don't want to cache, so I send a no-cache header.

But: this applies for document loading only, not for the data requests. I know I can set some headers with handleDataRequest in my entry.server.ts, but it would be great if I could set different cache headers for different routes for data requests also.

Is this possible?

[kiliman]

Each loader can return headers, including cache-control as part of the response. These headers will be used when Remix makes data requests (client-side navigation).

export const loader: LoaderFunction = async ({request}) => {
  // get data
  ...
  return json(data, { status: 200, headers: { 'cache-control': 'no-cache' }})
}

You can also specify document headers that should be applied to the route. You have access to the current loader headers as well as all the parent headers (headers are merged from root to leaf)

export const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {

  return { 'cache-control': loaderHeaders.get("cache-control") }
}

https://remix.run/docs/en/v1/api/conventions#headers

The handleRequest and handleDataRequest functions in entry.server are the last chance to modify the response before it is sent to the client. The responseHeaders here are based on the combination of loader headers and the headers export.

[gopeter]

Ooooh, overlooked the information that I can send headers in my loader response too. Thanks a lot!