Can I set headers on deferred responses?

[tammo]

Hello,

is it possible to set (cache-control) headers on deferred responses? This was a test case for me to understand data streaming. Which works fine. After delaying the data for some seconds I stumbled upon the question: What if I wanted to cache the loader response (not server-side)? I would set aggressive cache-controls headers and call it done?

But it seems there is something happening which I dont understand.

I was reading through these docs:

• https://remix.run/docs/en/main/guides/streaming
• https://remix.run/docs/en/main/route/headers

These are some console logs from the basic express server. First request is opening the app, second request is visiting the meteorites route again client side. "load meteorites" comes from the loader, "set headers" from the headers function. Which is missing (hence not called) for the "_data" request:

load meteorites
set headers
request url = /meteorites
[Object: null prototype] {
  'x-powered-by': 'Express',
  'cache-control': 'public, max-age=60, stale-while-revalidate=300, immutable',
  'content-type': 'text/html; charset=utf-8'
}
load meteorites
request url = /meteorites?_data=routes%2Fmeteorites
[Object: null prototype] {
  'x-powered-by': 'Express',
  'content-type': 'text/remix-deferred; charset=utf-8',
  'x-remix-response': 'yes'
}

[tammo]

Alright I am stupid.. I was so focused on the "deferred response", that I missed that the loader can set headers as well. So to get it right: the loader function is responsible for the _data body and headers.

And to answer my own question:
Setup cache headers via the loader function defer({ meteorites }, { headers });
As well as read the loader cache-control headers in the route module. Because to quote the docs "Usually your data is a better indicator of your cache duration than your route module"

export function headers({ loaderHeaders }: HeadersArgs) {
  return {
    "Cache-Control": loaderHeaders.get("Cache-Control"),
  };
}

What also helped me was this article about prefetching: https://sergiodxa.com/articles/fix-double-data-request-when-prefetching-in-remix

[EfosaE]

What's up, man? Remix has changed now, and I am using the v3 single fetch future flag. I also want to cache my deferred response
But I cant seem to figure it out because the term defer and json are deprecated.

`export async function loader() {
const categoriesPromise = getCategories(); // defered

return data(
{ categories: categoriesPromise },
{
headers: {
'Cache-Control': 'max-age=3600, public',
},
}
);
}`

That is how I read that remix supports setting headers along with your response, and to make a deferred response, you don't await the promise; you simply set the promise. The headers are not being set.

https://remix.run/docs/en/main/utils/data