How to combine raw objects or promises with headers returned from loader in v7?

[jsprbss]

I'm looking for a way to use the defer feature in the loader function to return both raw data and a promise while also setting an ETag in the header for caching purposes. Currently, I don't see any way to achieve this. Could you help me with this?

This in an implementation approach, that did not work:

[akomm]

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

[jsprbss]

Thanks for your reply.
Is there a way to do this in react-router-7?

[akomm]

Its actually part of router v7 and just re-exported in remix.

https://github.com/remix-run/react-router/blob/a6353f8f1951184cbc75ec7e5fa9431a207e0742/packages/react-router/lib/server-runtime/single-fetch.ts#L302

Either you need to add server-runtime explicitly, or its also re-exported somewhere in some of the react-router packages you already have in your dependencies.

[akomm]

Looks like its re-exported in react-router:
https://github.com/remix-run/react-router/blob/a6353f8f1951184cbc75ec7e5fa9431a207e0742/packages/react-router/index.ts#L60

[jsprbss]

Ah I missed that, thanks a lot!

[akomm]

YW.

Be careful sending just all headers to the remote. Might look convenient, but is also dangerous, because it would send potential secrets, like cookies, to a remote.

Doesn't even matter whether its trusted now and you intend to pass through cookies. The trust might change, new remote added or new cookies set for other purposes. They would be sent to those remotes regardless of consideration whether they should be sent or not, since this behavior is hidden in code and who will remember later?

Secrets might also be other headers, like Authorizationwith API tokens, etc.

Also consider using await Promise.all([...]) to reduce blocking in request processing, in case performance is an issue. You can typically do this whenever the requests are independent of each other's response.