I think I have a working document cache solution that's actually pretty good.

src/routes/__root.tsx

@@ -1,4 +1,5 @@
 import { AuthProvider } from "@/context/auth/AuthContext";
+import { DocumentProvider } from "@/context/document/DocumentContext";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
@@ -7,7 +8,9 @@ export const Route = createRootRoute({
   component: () => (
     <>
       <AuthProvider>
-        <Outlet />
+        <DocumentProvider>
+          <Outlet />
+        </DocumentProvider>
       </AuthProvider>
       <TanStackRouterDevtools />
       <ReactQueryDevtools buttonPosition="bottom-right" />

src/routes/_app/_authenticated/document.$documentId.tsx

@@ -1,5 +1,5 @@
 import { DocumentView } from "@/components/documents/DocumentView";
-import { DocumentProvider } from "@/context/document/DocumentContext";
+import { DocumentLoader } from "@/context/document/DocumentLoader";
 import type { DocumentId } from "@/lib/types";
 import { createFileRoute } from "@tanstack/react-router";
 
@@ -11,11 +11,10 @@ export const Route = createFileRoute(
 
 function RouteComponent() {
   const { documentId } = Route.useParams();
-  console.info("Rendering document route: ", documentId);
 
   return (
-    <DocumentProvider documentId={documentId as DocumentId}>
-      <DocumentView />
-    </DocumentProvider>
+    <DocumentLoader documentId={documentId as DocumentId}>
+      <DocumentView documentId={documentId as DocumentId} />
+    </DocumentLoader>
   );
 }