Detecting ajax requests vs. server-side requests

[mbrowne]

In a loader or action function, is there any built-in way to differentiate between requests that came from the client (via AJAX) and those that came from the server during SSR?

We have a use case where we'd like to cache a few things on the frontend so we don't have to run multiple graphql queries every time the page re-renders on the client. But if someone refreshes the page or goes to the URL directly, then we need to run all the queries to restore the state.

If this isn't a built-in feature, is there a way to add a custom header to either the server-side requests or client-side requests to the loaders so we can tell them apart?

[andreisena]

You can check the Accept header on loader. If it contains text/html MIME type, it is a SSR request, otherwise, it is a revalidate one.

[mbrowne]

Ah, thank you! That should work.

[parsagholipour]

For me request.headers.get('Accept') always returns
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7