Caching when going back

[wary cedar]

Hi, just wondering here. I am currently trying to add caching, using Cache-Control, but running into an issue with the fact that as soon as I hit the back button the request is "/?_data=routes/index", which means caching no longer works. Any way to avoid this?

[daring zephyr]

shouldn't the back button be a link?

or why is it necessary for it to be a button?

[wary cedar]

What I meant was the back button of the browser. But indeed it doesn’t work even for a Link.

Somehow Remix appends the ?_data= with it

[daring zephyr]

weird, from my memory it shouldn't append that when using a link and just going backwards for example

unless you aren't going to a specific route and tracking the location state mhm

[wary cedar]

Nope, just going back. I can commit the state I have and send you the repo? See if it does it for you too

[daring zephyr]

im not an expert in caching x)

but sure send me it

[wary cedar]

https://github.com/kubahasek/countries-remix-app-streaming.git

[wanton creek]

There are two types of requests, "document" and "data". When you load your initial page, that's a document request. Clicking a link to a new location will be a data request. Clicking the back button will fire off a data request for the original location.

If you click a link, click the back button, then click the link and back button again, everything will load from cache.

[wary cedar]

That’s what I would expect too, and I am trying to cache it on the document level (it makes sense to me most), but when running locally, it just doesn’t work. If i rewrite the URL manually it works as expected.

I don’t want to waste your guys’s time too much, but if you can run the repo locally you’ll see what I mean

[wanton creek]

Have you exported a "headers" function from your leaf route? Headers returned from loaders don't apply to document requests without that export.

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

[wary cedar]

I do have a headers function exported on the index route only atm

As said it works when you rewrite the URL but not when using the back button of the browser because the request shows a “?_data=routes/index” in the terminal

[wanton creek]

That is a "data" request as I mentioned above.

The initial request was a document request, so that data request on back has not yet been seen and entered into the cache.

It's a net new request.

How remix works:

• initial load is a document request

• if you click a <Link>, a data request is made for the new location

• when clicking back, a data request will be made for the previous locations data (a net new request not yet seen or in cache)

• if you click an <a>, a document request is made for the new location

• when clicking back, a document request is made. This will come from cache as it's been seen before

"back" after clicking a <Link> isn't "back", it's a "new client side navigation to the previous location", this requres the ?data request

If you don't want data requests, remove <Scripts /> or don't render <Link>, only use <a>

Yes, it works fine.

[wary cedar]

Right, okay, I will try that! Thanks again!

[wanton creek]

Click around here: https://simple-remix-deferred-demo.fly.dev/blog/another-post

Click a link, then use the back and forward arrows. You'll see things come from cache.

Here is the source: https://github.com/jacob-ebey/stupid-simple-remix-deferred-demo/blob/main/app/routes/__blog/index.tsx

[wary cedar]

Was just gonna ask if it had a repo, thank you, I will try it out later!