Support loader return differentiation based on revalidation state

[kentcdodds]

You can find my use case explanation in this live stream at around 1:10:00 ish.

Let's say you've got a combobox and you want to pre-fill it with some data. So you have an initialData property in the json you return for the loader. However, when there's revalidation for that route, the combobox doesn't need the initialData anymore because it already got it on the initial route load, so returning initialData is unnecessary (and sub-optimal).

I'd like a way for the loader to know whether the call is a result of loader revalidation.

@ryanflorence suggested using the referer header and I think when React Router 6.4 is finished integrating with Remix that may work. In this case, the fetch will be called from the route that the user is navigating from and the loader could simply do something like this:

const isRevalidating = new URL(request.headers.get('referer')).pathname === new URL(request.url).pathname

I think this should work, however Ryan seemed to think a X-Remix-Referrer would be necessary.

EDIT: FWIW, this won't work on LiveReload because the referrer in that case is the page you were on when the live reload happened.

Suggestions and ideas are welcome. Kinda tricky because I won't really be able to test this fully until React Router 6.4 is fully integrated with Remix.

[kiliman]

Remix already has a X-Remix-Revalidate header that the server sets in a response to tell the client to revalidate. Perhaps the client can also set this header in the loader requests. Then your code is simply:

const isRevalidating = request.headers.get('X-Remix-Revalidate') === 'yes'

remix/packages/remix-server-runtime/server.ts

Lines 107 to 116 in ef26f76

	if (isRedirectResponse(response)) {
	// We don't have any way to prevent a fetch request from following
	// redirects. So we use the `X-Remix-Redirect` header to indicate the
	// next URL, and then "follow" the redirect manually on the client.
	let headers = new Headers(response.headers);
	headers.set("X-Remix-Redirect", headers.get("Location")!);
	headers.delete("Location");
	if (response.headers.get("Set-Cookie") !== null) {
	headers.set("X-Remix-Revalidate", "yes");
	}

[zipme]

Hello everyone! 😊

I hope you're all having a fantastic day! I was wondering if there are any updates on this topic. I've come across a use case that I'd like to share, and I'm curious to hear your thoughts on how to approach it.

Let's say we have a shopping basket icon located at the top right corner of a webpage. We want to fetch the items count in the basket via the loader from the client side to enable CDN's page cache. I've been considering a couple of options, and I'd appreciate any feedback or suggestions you might have.

• We could forgo the page level cache and only use the loader cache. However, I'm concerned that this might result in reduced performance.
• Alternatively, we could manually call useFetcher. With this approach, we'd also need to handle the revalidation logic ourselves.
  Please let me know if you have any insights or recommendations. Thanks in advance for your help and looking forward to hearing from you soon! 😊
• A third option, which is related to this topic, might be to have the loader return null as the count for the initial server load using the isRevalidating. Then, on the client side, we would initiate the revalidate via useRevalidator. In this case, the loader would only return the correct count during revalidation.

Best regards,

[zipme]

A related discussion #5757