Opt-out of single fetch.

[semet]

Dear Experts…
How can i opt-out of the Single Fetch feature in React Router v7?

[sergiodxa]

If you add a clientLoader to every route that just calls your server loader, then each route will cause a separate request, similar to Remix v2 without Single Fetch.

Aside of that, there's no other way, RR doesn't support Single Fetch as a feature flag, it's the default behavior, it was a flag in Remix v2 because it was a breaking change.

[semet]

what if the app is ssr being set to false? because as far as i tested out, the behavior is the same between SSR: true vs SSR: false in terms of single fetch behavior..

here is my actual case..

1. i have pretty large RR v7 app with root.tsxthat fetch bunch of data where i set shouldRevalidate to some condition (if an action result contains success === true)
2. there is a wrapper _layout.tsx that is the parent of all the routes that acting as MAIN AUTH CHECK.. here, i do not have shouldRevalidate export, meaning it will run in each child navigation. Inside this route, i have a server loader that do an API call to check if the current user is still authenticated. Because the my backend team design the API like that, we need to check if the user token is still valid by making an api call.
3. inside the loader of this _layout.tsx, i make a redirect logic that will redirect the user to /login if the try to access the authenticated routs but his token is already invalidated by the backend. besides of checking the token status, this loader also return the data for its component.
4. if the user token is no longer valid, he will be redirected to /login?intent=some_path_that_requires_auth
5. after successful login, the _layout.tsx re-triggerd and fetch the user info (that contains token), set the cookie containing that token, and redirect to some_path_that_requires_auth.

here you can already see the issue. since the some_path_that_requires_auth has a loader that fetch data that requires token retrived in _layout.tsx, it will fail because the moment _layout loader fetch the user info, the some_path_that_requires_auth also attempt to fetch the data taht REQUIRES that token being set into cookie in mean time from _layout.tsx loader. hence, the cookie in some_path_that_requires_auth still undefined!

what is your advice for this case?

[mrksbnch]

While this is not a solution for a production app right now, this sounds like something that can be solved with the new middleware feature.

In your case, an auth middleware would validate the token in the cookie and then either redirect to the login page or simply continue. You could even pass over some additional user information to other loaders using context.