diff --git a/client/packages/core/src/Reactor.js b/client/packages/core/src/Reactor.js
index de9af2919..004c7b7a7 100644
--- a/client/packages/core/src/Reactor.js
+++ b/client/packages/core/src/Reactor.js
@@ -948,7 +948,7 @@ export default class Reactor {
 
   shutdown() {
     this._isShutdown = true;
-    this._ws.close();
+    this._ws?.close();
   }
 
   /**
diff --git a/client/www/components/clientOnlyPage.tsx b/client/www/components/clientOnlyPage.tsx
new file mode 100644
index 000000000..a980026cc
--- /dev/null
+++ b/client/www/components/clientOnlyPage.tsx
@@ -0,0 +1,29 @@
+import { useIsHydrated } from '@/lib/hooks/useIsHydrated';
+import { NextRouter, useRouter } from 'next/router';
+
+export function useReadyRouter(): Omit<NextRouter, 'isReady'> {
+  const router = useRouter();
+  if (!router.isReady) {
+    throw new Error(
+      'Router wasn not ready. Make sure to call this hook somewhere inside an `asClientOnlyPage` component',
+    );
+  }
+  return router;
+}
+
+export function asClientOnlyPage<Props extends JSX.IntrinsicAttributes>(
+  Component: React.ComponentType<Props>,
+) {
+  return function ClientOnlyPage(props: Props) {
+    const isHydrated = useIsHydrated();
+    const router = useRouter();
+    if (!isHydrated) {
+      return null;
+    }
+    if (!router.isReady) {
+      return null;
+    }
+
+    return <Component {...props} />;
+  };
+}
diff --git a/client/www/lib/hooks/useDashFetch.tsx b/client/www/lib/hooks/useDashFetch.tsx
new file mode 100644
index 000000000..e4e38ccb6
--- /dev/null
+++ b/client/www/lib/hooks/useDashFetch.tsx
@@ -0,0 +1,66 @@
+import { useContext, useEffect, useMemo } from 'react';
+import { APIResponse, useAuthedFetch } from '../auth';
+import config from '../config';
+import { DashResponse } from '../types';
+import { TokenContext } from '../contexts';
+import useLocalStorage from './useLocalStorage';
+import { subDays } from 'date-fns';
+
+// FNV-1a algorithm
+function stringHash(input: string) {
+  let hash = 0x811c9dc5; // FNV offset basis (32 bit)
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash +=
+      (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+    hash = hash >>> 0; // Convert to unsigned 32-bit after each iteration
+  }
+  return hash.toString(16);
+}
+
+type CachedEntry<T> = {
+  item: T;
+  updatedAt: number;
+};
+
+export type CachedAPIResponse<T> = APIResponse<T> & { fromCache?: boolean };
+
+export function useDashFetch(): CachedAPIResponse<DashResponse> {
+  const now = new Date();
+  const oneWeekAgo = subDays(now, 7).getTime();
+
+  const token = useContext(TokenContext);
+  const [cachedEntry, setCachedEntry] = useLocalStorage<
+    CachedEntry<DashResponse> | undefined
+  >(`dash:${stringHash(token || 'unk')}`, undefined);
+
+  const item =
+    cachedEntry && cachedEntry.updatedAt > oneWeekAgo
+      ? cachedEntry.item
+      : undefined;
+
+  const dashResponse = useAuthedFetch<DashResponse>(`${config.apiURI}/dash`);
+  useEffect(() => {
+    if (dashResponse.data) {
+      setCachedEntry({
+        item: dashResponse.data,
+        updatedAt: Date.now(),
+      });
+      return;
+    }
+    if (dashResponse.error) {
+      setCachedEntry(undefined);
+    }
+  }, [dashResponse.data, dashResponse.error]);
+
+  if (dashResponse.isLoading && cachedEntry && item) {
+    return {
+      ...dashResponse,
+      isLoading: false,
+      data: item,
+      fromCache: true,
+    };
+  }
+
+  return dashResponse;
+}
diff --git a/client/www/pages/_devtool/index.tsx b/client/www/pages/_devtool/index.tsx
index 9f09803f6..b699d8ed0 100644
--- a/client/www/pages/_devtool/index.tsx
+++ b/client/www/pages/_devtool/index.tsx
@@ -26,18 +26,126 @@ import {
 import Auth from '@/components/dash/Auth';
 import { isMinRole } from '@/pages/dash/index';
 import { TrashIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { CachedAPIResponse, useDashFetch } from '@/lib/hooks/useDashFetch';
+import { asClientOnlyPage, useReadyRouter } from '@/components/clientOnlyPage';
 
 type InstantReactClient = ReturnType<typeof init>;
 
-export default function Devtool() {
-  const router = useRouter();
+const Devtool = asClientOnlyPage(DevtoolComp);
+export default Devtool;
+
+function DevtoolComp() {
+  const router = useReadyRouter();
   const authToken = useAuthToken();
-  const isHydrated = useIsHydrated();
-  const dashResponse = useTokenFetch<DashResponse>(
-    `${config.apiURI}/dash`,
-    authToken,
+  if (!authToken) {
+    return (
+      <DevtoolWindow>
+        <Auth
+          emailOnly
+          info={
+            <div className="bg-gray-100 p-4 border rounded">
+              <Help />
+            </div>
+          }
+        />
+      </DevtoolWindow>
+    );
+  }
+
+  const appId = router.query.appId as string | undefined;
+
+  if (!appId) {
+    return (
+      <DevtoolWindow>
+        <div className="h-full w-full flex justify-center items-center">
+          <div className="max-w-md mx-auto space-y-4">
+            <ScreenHeading>No app id provided</ScreenHeading>
+            <p>
+              We didn't receive an app ID. Double check that you passed an{' '}
+              <Code>appId</Code> paramater in your <Code>init</Code>. If you
+              continue experiencing issues, ping us on Discord.
+            </p>
+            <Button
+              className="w-full"
+              size="mini"
+              variant="secondary"
+              onClick={() => {
+                signOut();
+              }}
+            >
+              Sign out
+            </Button>
+          </div>
+        </div>
+      </DevtoolWindow>
+    );
+  }
+
+  return (
+    <TokenContext.Provider value={authToken}>
+      <DevtoolAuthorized appId={appId} />
+    </TokenContext.Provider>
   );
-  const appId = router.query.appId as string;
+}
+
+function DevtoolAuthorized({ appId }: { appId: string }) {
+  const dashResponse = useDashFetch();
+
+  if (dashResponse.isLoading) {
+    return null;
+  }
+
+  if (dashResponse.error) {
+    const message = dashResponse.error.message;
+    return (
+      <DevtoolWindow>
+        <div className="h-full w-full flex justify-center items-center">
+          <div className="max-w-md mx-auto space-y-4">
+            <ScreenHeading>🤕 Failed to load your app</ScreenHeading>
+            {message ? (
+              <div className="mx-auto flex w-full max-w-2xl flex-col">
+                <div className="rounded bg-red-100 p-4 text-red-700">
+                  {message}
+                </div>
+              </div>
+            ) : null}
+            <p>
+              We had some trouble loading your app. Please ping us on{' '}
+              <a
+                className="font-bold text-blue-500"
+                href="https://discord.com/invite/VU53p7uQcE"
+                target="_blank"
+              >
+                discord
+              </a>{' '}
+              with details.
+            </p>
+            <Button
+              className="w-full"
+              size="mini"
+              variant="secondary"
+              onClick={() => {
+                signOut();
+              }}
+            >
+              Sign out
+            </Button>
+          </div>
+        </div>
+      </DevtoolWindow>
+    );
+  }
+
+  return <DevtoolWithData dashResponse={dashResponse} appId={appId} />;
+}
+
+function DevtoolWithData({
+  dashResponse,
+  appId,
+}: {
+  dashResponse: CachedAPIResponse<DashResponse>;
+  appId: string;
+}) {
   const app = dashResponse.data?.apps?.find((a) => a.id === appId);
   const [tab, setTab] = useState('explorer');
   const [connection, setConnection] = useState<
@@ -80,8 +188,10 @@ export default function Devtool() {
     return () => removeEventListener('keydown', onKeyDown);
   }, []);
 
+  const adminToken = app?.admin_token;
+
   useEffect(() => {
-    if (!app) return;
+    if (!appId || !adminToken) return;
     if (typeof window === 'undefined') return;
 
     try {
@@ -90,9 +200,10 @@ export default function Devtool() {
         apiURI: config.apiURI,
         websocketURI: config.websocketURI,
         // @ts-expect-error
-        __adminToken: app?.admin_token,
+        __adminToken: adminToken,
         devtool: false,
       });
+
       setConnection({ state: 'ready', db });
 
       return () => {
@@ -102,103 +213,14 @@ export default function Devtool() {
       const message = (error as Error).message;
       setConnection({ state: 'error', errorMessage: message });
     }
-  }, [router.isReady, app]);
+  }, [appId, adminToken]);
 
-  if (!isHydrated) {
+  if (!app && dashResponse.fromCache) {
+    // We couldn't find this app. Perhaps the cache is stale. Let's
+    // wait for the fresh data.
     return null;
   }
 
-  if (!authToken) {
-    return (
-      <DevtoolWindow>
-        <Auth
-          emailOnly
-          info={
-            <div className="bg-gray-100 p-4 border rounded">
-              <Help />
-            </div>
-          }
-        />
-      </DevtoolWindow>
-    );
-  }
-
-  if (dashResponse.isLoading) {
-    return (
-      <div className="h-full w-full flex justify-center items-center">
-        Loading...
-      </div>
-    );
-  }
-
-  if (dashResponse.error) {
-    const message = dashResponse.error.message;
-    return (
-      <DevtoolWindow>
-        <div className="h-full w-full flex justify-center items-center">
-          <div className="max-w-md mx-auto space-y-4">
-            <ScreenHeading>🤕 Failed to load your app</ScreenHeading>
-            {message ? (
-              <div className="mx-auto flex w-full max-w-2xl flex-col">
-                <div className="rounded bg-red-100 p-4 text-red-700">
-                  {message}
-                </div>
-              </div>
-            ) : null}
-            <p>
-              We had some trouble loading your app. Please ping us on{' '}
-              <a
-                className="font-bold text-blue-500"
-                href="https://discord.com/invite/VU53p7uQcE"
-                target="_blank"
-              >
-                discord
-              </a>{' '}
-              with details.
-            </p>
-            <Button
-              className="w-full"
-              size="mini"
-              variant="secondary"
-              onClick={() => {
-                signOut();
-              }}
-            >
-              Sign out
-            </Button>
-          </div>
-        </div>
-      </DevtoolWindow>
-    );
-  }
-
-  if (!appId) {
-    return (
-      <DevtoolWindow>
-        <div className="h-full w-full flex justify-center items-center">
-          <div className="max-w-md mx-auto space-y-4">
-            <ScreenHeading>No app id provided</ScreenHeading>
-            <p>
-              We didn't receive an app ID. Double check that you passed an{' '}
-              <Code>appId</Code> paramater in your <Code>init</Code>. If you
-              continue experiencing issues, ping us on Discord.
-            </p>
-            <Button
-              className="w-full"
-              size="mini"
-              variant="secondary"
-              onClick={() => {
-                signOut();
-              }}
-            >
-              Sign out
-            </Button>
-          </div>
-        </div>
-      </DevtoolWindow>
-    );
-  }
-
   if (!app) {
     const user = dashResponse.data?.user;
     return (
@@ -255,8 +277,8 @@ export default function Devtool() {
             ) : null}
             <AppIdLabel appId={appId} />
             <p>
-              We had some trouble connect to Instant's backend. Please ping us
-              on{' '}
+              We had some trouble connecting to Instant's backend. Please ping
+              us on{' '}
               <a
                 className="font-bold text-blue-500"
                 href="https://discord.com/invite/VU53p7uQcE"
@@ -292,68 +314,66 @@ export default function Devtool() {
 
   return (
     <DevtoolWindow app={app}>
-      <TokenContext.Provider value={authToken}>
-        <div className="flex flex-col h-full w-full">
-          <div className="bg-gray-50 border-b">
-            <AppIdLabel appId={app.id} />
-          </div>
-          <TabBar
-            className="text-sm"
-            selectedId={tab}
-            tabs={[
-              {
-                id: 'explorer',
-                label: 'Explorer',
-              },
-              {
-                id: 'sandbox',
-                label: 'Sandbox',
-              },
-              {
-                id: 'admin',
-                label: 'Admin',
-              },
-              {
-                id: 'help',
-                label: 'Help',
-              },
-            ]}
-            onSelect={(t) => {
-              setTab(t.id);
-            }}
-          />
-          <div className="flex w-full flex-1 overflow-auto">
-            {tab === 'explorer' ? (
-              <Explorer
-                db={connection.db}
-                appId={appId}
-                isStorageEnabled={isStorageEnabled}
-              />
-            ) : tab === 'sandbox' ? (
-              <div className="min-w-[960px] w-full">
-                <Sandbox app={app} />
-              </div>
-            ) : tab === 'admin' ? (
-              <div className="min-w-[960px] w-full p-4">
-                <Admin dashResponse={dashResponse} app={app} />
-              </div>
-            ) : tab === 'help' ? (
-              <div className="min-w-[960px] w-full p-4 space-y-2">
-                <Help />
-                <Button
-                  size="mini"
-                  variant="secondary"
-                  onClick={() => {
-                    signOut();
-                  }}
-                >
-                  Sign out
-                </Button>
-              </div>
-            ) : null}
-          </div>
+      <div className="flex flex-col h-full w-full">
+        <div className="bg-gray-50 border-b">
+          <AppIdLabel appId={app.id} />
         </div>
-      </TokenContext.Provider>
+        <TabBar
+          className="text-sm"
+          selectedId={tab}
+          tabs={[
+            {
+              id: 'explorer',
+              label: 'Explorer',
+            },
+            {
+              id: 'sandbox',
+              label: 'Sandbox',
+            },
+            {
+              id: 'admin',
+              label: 'Admin',
+            },
+            {
+              id: 'help',
+              label: 'Help',
+            },
+          ]}
+          onSelect={(t) => {
+            setTab(t.id);
+          }}
+        />
+        <div className="flex w-full flex-1 overflow-auto">
+          {tab === 'explorer' ? (
+            <Explorer
+              db={connection.db}
+              appId={appId}
+              isStorageEnabled={isStorageEnabled}
+            />
+          ) : tab === 'sandbox' ? (
+            <div className="min-w-[960px] w-full">
+              <Sandbox app={app} />
+            </div>
+          ) : tab === 'admin' ? (
+            <div className="min-w-[960px] w-full p-4">
+              <Admin dashResponse={dashResponse} app={app} />
+            </div>
+          ) : tab === 'help' ? (
+            <div className="min-w-[960px] w-full p-4 space-y-2">
+              <Help />
+              <Button
+                size="mini"
+                variant="secondary"
+                onClick={() => {
+                  signOut();
+                }}
+              >
+                Sign out
+              </Button>
+            </div>
+          ) : null}
+        </div>
+      </div>
     </DevtoolWindow>
   );
 }
diff --git a/client/www/pages/dash/index.tsx b/client/www/pages/dash/index.tsx
index 5b9af36eb..cf6ef3b0a 100644
--- a/client/www/pages/dash/index.tsx
+++ b/client/www/pages/dash/index.tsx
@@ -15,7 +15,6 @@ import {
   APIResponse,
   signOut,
   useAuthToken,
-  useAuthedFetch,
   claimTicket,
   voidTicket,
 } from '@/lib/auth';
@@ -56,8 +55,9 @@ import { Sandbox } from '@/components/dash/Sandbox';
 import { StorageTab } from '@/components/dash/Storage';
 import PersonalAccessTokensScreen from '@/components/dash/PersonalAccessTokensScreen';
 import { useForm } from '@/lib/hooks/useForm';
-import { useSchemaQuery } from '@/lib/hooks/explorer';
 import useLocalStorage from '@/lib/hooks/useLocalStorage';
+import { useDashFetch } from '@/lib/hooks/useDashFetch';
+import { asClientOnlyPage, useReadyRouter } from '@/components/clientOnlyPage';
 
 // (XXX): we may want to expose this underlying type
 type InstantReactClient = ReturnType<typeof init>;
@@ -110,15 +110,20 @@ export function isMinRole(minRole: Role, role: Role) {
 
 // COMPONENTS
 
-export default function DashV2() {
+const Dash = asClientOnlyPage(DashV2);
+
+export default Dash;
+
+function DashV2() {
   const token = useAuthToken();
-  const isHydrated = useIsHydrated();
-  const router = useRouter();
+  const readyRouter = useRouter();
   const cliAuthCompleteDialog = useDialog();
   const [loginTicket, setLoginTicket] = useState<string | undefined>();
 
-  const cliNormalTicket = router.query.ticket as string | undefined;
-  const cliOauthTicket = router.query[cliOauthParamName] as string | undefined;
+  const cliNormalTicket = readyRouter.query.ticket as string | undefined;
+  const cliOauthTicket = readyRouter.query[cliOauthParamName] as
+    | string
+    | undefined;
   const cliTicket = cliNormalTicket || cliOauthTicket;
   useEffect(() => {
     if (cliTicket) setLoginTicket(cliTicket);
@@ -139,10 +144,6 @@ export default function DashV2() {
     }
   }
 
-  if (!isHydrated) {
-    return null;
-  }
-
   if (!token) {
     return (
       <Auth
@@ -239,7 +240,7 @@ function isTabAvailable(tab: Tab, role?: Role) {
 
 function Dashboard() {
   const token = useContext(TokenContext);
-  const router = useRouter();
+  const router = useReadyRouter();
   const appId = router.query.app as string;
   const screen = (router.query.s as string) || 'main';
   const _tab = router.query.t as TabId;
@@ -252,7 +253,7 @@ function Dashboard() {
     db: InstantReactClient;
   } | null>(null);
 
-  const dashResponse = useAuthedFetch<DashResponse>(`${config.apiURI}/dash`);
+  const dashResponse = useDashFetch();
 
   useEffect(() => {
     if (!token) return;
@@ -306,7 +307,6 @@ function Dashboard() {
   const showInvitesOnboarding = hasInvites && !dashResponse.data?.apps?.length;
 
   useEffect(() => {
-    if (!router.isReady) return;
     if (screen && screen !== 'main') return;
     if (hasInvites) {
       nav({
@@ -338,7 +338,7 @@ function Dashboard() {
     });
 
     setLocal('dash_app_id', defaultAppId);
-  }, [router.isReady, dashResponse.data]);
+  }, [dashResponse.data]);
 
   useEffect(() => {
     if (!app) return;
@@ -356,7 +356,7 @@ function Dashboard() {
     return () => {
       db._core.shutdown();
     };
-  }, [router.isReady, app?.id, app?.admin_token]);
+  }, [app?.id, app?.admin_token]);
 
   function nav(q: { s: string; app?: string; t?: string }) {
     if (q.app) setLocal('dash_app_id', q.app);