#428

frontend/src/main.tsx

@@ -8,6 +8,7 @@ import App from '@/App'
 import { createUII18n } from '@/lib/i18n'
 import { prepareHelpPage } from '@/lib/help'
 import { currentViewingLocale } from '@/lib/locales'
+import { localesKeys } from '@/lib/queryKeys'
 import { applyClientAnimationMode, getClientAnimationMode } from '@/lib/settings'
 
 import type { DehydratedState } from '@tanstack/react-query'
@@ -21,14 +22,7 @@ const client = new QueryClient ({
 		   retry:     1 } } })
 
 
-const start = async () => {
-  const bootstrap = document.getElementById ('ssr-state')
-  if (bootstrap?.textContent)
-  {
-    const data = JSON.parse (bootstrap.textContent) as { state: DehydratedState }
-    hydrate (client, data.state)
-    await prepareHelpPage (client, new URL (window.location.href))
-  }
+const mount = (serverRendered: boolean) => {
   const instance = createUII18n (currentViewingLocale ())
   const app = (
       <HelmetProvider context={helmetContext}>
@@ -39,12 +33,82 @@ const start = async () => {
 	</QueryClientProvider>
       </HelmetProvider>)
   const root = document.getElementById ('root')!
-  if (bootstrap != null)
+  if (serverRendered)
     hydrateRoot (root, app)
   else
     createRoot (root).render (app)
-  applyClientAnimationMode (getClientAnimationMode ())
 }
 
 
-void start ()
+const start = () => {
+  applyClientAnimationMode (getClientAnimationMode ())
+  const bootstrap = document.getElementById ('ssr-state')
+  if (bootstrap == null)
+  {
+    mount (false)
+    return
+  }
+  const storageKey = 'btrc_hub.ssr-recovery'
+  const identity = `${import.meta.url}:${location.pathname}${location.search}`
+  let pending = false
+  let mounted = false
+  const retry = () => { void attempt () }
+  const attempt = async () => {
+    if (pending || mounted)
+      return
+    pending = true
+    try
+    {
+      const data = JSON.parse (bootstrap.textContent ?? '') as {
+	  state: DehydratedState; status: number }
+      if (data?.state == null || !(Array.isArray (data.state.queries)))
+	throw new Error ('Invalid SSR query state')
+      hydrate (client, data.state)
+      if (client.getQueryData (localesKeys.index) == null)
+	throw new Error ('Missing SSR locales')
+      const status = await prepareHelpPage (client, new URL (window.location.href))
+      if (status !== data.status)
+	throw new Error ('Server and browser Help versions differ')
+      mount (true)
+      mounted = true
+      for (const event of ['online', 'focus', 'pageshow'])
+	window.removeEventListener (event, retry)
+      try
+      {
+	sessionStorage.removeItem (storageKey)
+      }
+      catch
+      {
+	// Storage may be unavailable; successful hydration needs no recovery marker.
+      }
+    }
+    catch (error)
+    {
+      console.error ('[SSR] Preparation failed; keeping server HTML', error)
+      // A new document also clears failed dynamic-import module caches.
+      // Never clear the root or attempt CSR over unmatched server markup.
+      try
+      {
+	if (navigator.onLine && sessionStorage.getItem (storageKey) !== identity)
+	{
+	  sessionStorage.setItem (storageKey, identity)
+	  window.location.reload ()
+	}
+      }
+      catch
+      {
+	// Keep the readable document and retry on online/focus/pageshow instead.
+      }
+    }
+    finally
+    {
+      pending = false
+    }
+  }
+  for (const event of ['online', 'focus', 'pageshow'])
+    window.addEventListener (event, retry)
+  retry ()
+}
+
+
+start ()