fix: rare hydration problem

marudor · Jan 18, 2025 · 75b7ded · 75b7ded
1 parent 58f9a99
commit 75b7ded
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/client/index.tsx b/src/client/index.tsx
@@ -6,9 +6,9 @@ import { hydrateRoot } from 'react-dom/client';
 import { HeadProvider } from 'react-head';
 
 const cache = createEmotionCache({ prepend: true, key: 'css' });
-const router = createRouter();
 
 async function render() {
+	const router = createRouter();
 	await router.load();
 
 	hydrateRoot(

diff --git a/src/router.tsx b/src/router.tsx
@@ -67,10 +67,16 @@ const queryClientOptions: QueryClientConfig = {
 
 const queryClient = new QueryClient(queryClientOptions);
 
-if (!import.meta.env.SSR && window.__TSR__) {
-	const queryClientData = parse(window.__TSR__.dehydrated).payload
-		.queryClientState;
-	hydrate(queryClient, queryClientData);
+if (!import.meta.env.SSR) {
+	window.addEventListener('load', () => {
+		try {
+			if (window.__TSR__) {
+				const queryClientData = parse(window.__TSR__.dehydrated).payload
+					.queryClientState;
+				hydrate(queryClient, queryClientData);
+			}
+		} catch {}
+	});
 }
 
 const trpcUtils = createTRPCQueryUtils({