Add reloadDocument option to navigate/submit

[gerbyzation]

Following the discussion remix-run/react-router#9859 reloadDocument was added to remix which on the server side allows you to redirect to a URL path that is managed by another application on the same domain.
The server-side redirect is communicated to the front-end via the X-Remix-Reload-Document header and executed in the browser:
https://github.com/remix-run/react-router/blob/4475b56d2e18014acfb8ff5f6077ff27df98d7fe/packages/router/router.ts#L2255-L2262

This has been working great for predictable scenario's, like redirecting to the login page that is hosted on a different app when a loader/action detects a user is not authenticated.

For other scenario's it would be beneficial to be able to achieve the same effect directly from the browser. Manipulating window.location directly does not seem a viable option based on #8011 as it ends up competing with remix. In the response to that issue the proposed solution is to use reloadDocument on the server side, however this does not seem like an ideal solution:

• would involve an extra hop to the server side, even though we can detect on the frontend whether the page should reloaded. In the end the server-side redirect/reload would be executed on the frontend, so the only reason to go via the server is because that is the only way to access this behaviour in remix.
• there is no straight forward way to apply this on a global level on all loaders without middleware (that I'm aware of at least - if there is please correct me!)
• with the proposal to add an SPA mode to remix this would possibly remove the option of reloading the document?

One idea of how this could be accomplished is to add a reloadDocument option to navigate():

navigate('/news', { reloadDocument: true})

[brophdawg11]

FWIW, I think once client data and middleware land, you'll be able to avoid all of the concerns above. Not trying to say we shouldn't pull reloadDocument down into navigate - just that there will be ways to achieve the given use-case without the above concerns.

[brophdawg11]

Assuming middleware only runs on the server

I wouldn't make this assumption 😉

[gerbyzation]

Okay interesting! Next question: when can we have it? 😁

In the meantime, would this be considered if I create a PR for it? We can't wait until remix 3 to solve this so will most likely have to write a patch for internal use anyway

[brophdawg11]

I wouldn't open a PR yet, as the purpose of the Proposal process is to avoid community opened PRs that get closed due to a lack of desire for the new API surface. If you need the functionality now, you can use patch-package and feel free to add the patch contents in this discussion so that it's an easy PR if this feature is accepted.

We can't wait until remix 3

You won't have to - features such as middleware will be released in v2 when ready (behind v3_ future flag if needed).

[gerbyzation]

Yes, this is exactly what I've done via pnpm patch currently as it's also not available yet behind a flag. I've got a branch with a version that integrates this all nicely with navigate, but for a patch went for minimal footprint to keep it easy to maintain until a well integrated solution lands. Globals are meh but it'll do for now 😅

diff --git a/dist/esm/routeModules.js b/dist/esm/routeModules.js
index 6f53dfed9d9e3923d0f7740b6fb53343875e0285..94804919cafe14ab5b64ff8edcdc771e5e3b8bd4 100644
--- a/dist/esm/routeModules.js
+++ b/dist/esm/routeModules.js
@@ -44,7 +44,9 @@ async function loadRouteModule(route, routeModulesCache) {
     // asset we're trying to import! Reload from the server and the user
     // (should) get the new manifest--unless the developer purged the static
     // assets, the manifest path, but not the documents 😬
-    window.location.reload();
+    if (window.__unsafe_remix_reloading_document !== true) {
+      window.location.reload();
+    }
     return new Promise(() => {
       // check out of this hook cause the DJs never gonna re[s]olve this
     });
diff --git a/dist/routeModules.js b/dist/routeModules.js
index 97824576164794f9641abfdac23c443ac4a523f1..bcda2093a3c90953d2e1e2580810b3d31f672f4b 100644
--- a/dist/routeModules.js
+++ b/dist/routeModules.js
@@ -66,7 +66,9 @@ async function loadRouteModule(route, routeModulesCache) {
     // asset we're trying to import! Reload from the server and the user
     // (should) get the new manifest--unless the developer purged the static
     // assets, the manifest path, but not the documents 😬
-    window.location.reload();
+    if (window.__unsafe_remix_reloading_document !== true) {
+      window.location.reload();
+    }
     return new Promise(() => {
       // check out of this hook cause the DJs never gonna re[s]olve this
     });

Usage is pretty simple:

setIsReloadingDocument(true);
window.__unsafe_remix_reloading_document = true;
window.location.assign(navigation.location.pathname);

If you would like some help/contributions later on let me know!

[gustavopch]

@gerbyzation Tip: use ```diff and ```js to enable syntax highlighting in your snippets.