Imporove ssr data fetching

Author: ije

framework/react/bootstrap.ts

@@ -3,15 +3,16 @@ import { hydrate, render } from 'https://esm.sh/[email protected]'
 import { importModule } from '../core/module.ts'
 import { Routing, RoutingOptions } from '../core/routing.ts'
 import Router, { createPageRoute } from './components/Router.ts'
-import { loadSSRDataFromTag } from './pagedata.ts'
+import { loadSSRDataFromTag, setStaticSsrRoutes } from './pagedata.ts'
 
 type BootstrapOptions = Required<RoutingOptions> & {
+  ssrRoutes?: string[],
   appModule?: string,
   renderMode: 'ssr' | 'spa'
 }
 
 export default async function bootstrap(options: BootstrapOptions) {
-  const { basePath, defaultLocale, locales, appModule: appModuleSpcifier, routes, rewrites, renderMode } = options
+  const { basePath, defaultLocale, locales, appModule: appModuleSpcifier, routes, ssrRoutes, rewrites, renderMode } = options
   const { document } = window as any
   const appModule = appModuleSpcifier ? await importModule(basePath, appModuleSpcifier) : {}
   const routing = new Routing({ routes, rewrites, basePath, defaultLocale, locales })
@@ -21,23 +22,25 @@ export default async function bootstrap(options: BootstrapOptions) {
   const mountPoint = document.getElementById('__aleph')
 
   if (renderMode === 'ssr') {
+    if (ssrRoutes) {
+      setStaticSsrRoutes(ssrRoutes)
+    }
     loadSSRDataFromTag(url)
     hydrate(routerEl, mountPoint)
   } else {
     render(routerEl, mountPoint)
   }
 
-  // remove ssr head elements, set a timmer to avoid the tab title flash
-  setTimeout(() => {
-    Array.from(document.head.children).forEach((el: any) => {
-      const tag = el.tagName.toLowerCase()
-      if (
-        el.hasAttribute('ssr') &&
-        tag !== 'style' &&
-        !(tag === 'link' && el.getAttribute('rel') === 'stylesheet')
-      ) {
-        document.head.removeChild(el)
-      }
-    })
-  }, 0)
+  // remove ssr head elements
+  await Promise.resolve()
+  Array.from(document.head.children).forEach((el: any) => {
+    const tag = el.tagName.toLowerCase()
+    if (
+      el.hasAttribute('ssr') &&
+      tag !== 'style' &&
+      !(tag === 'link' && el.getAttribute('rel') === 'stylesheet')
+    ) {
+      document.head.removeChild(el)
+    }
+  })
 }

framework/react/pagedata.ts

@@ -2,6 +2,12 @@ import util from '../../shared/util.ts'
 import type { RouterURL } from '../../types.ts'
 
 const global = window as any
+const lazySsrRoutes: Map<string, boolean> = new Map()
+
+let staticSsrRoutes: Set<string> | null = null
+export function setStaticSsrRoutes(routes: string[]) {
+  staticSsrRoutes = new Set(routes)
+}
 
 export function shouldLoadPageData(url: RouterURL): boolean {
   const href = url.toString()
@@ -16,6 +22,12 @@ export function shouldLoadPageData(url: RouterURL): boolean {
       delete global[`${pagedataUrl}#${key}`]
     })
   }
+  if (staticSsrRoutes) {
+    return staticSsrRoutes.has(url.routePath)
+  }
+  if (lazySsrRoutes.has(url.routePath)) {
+    return lazySsrRoutes.get(url.routePath)!
+  }
   return true
 }
 
@@ -29,10 +41,17 @@ export async function loadPageData(url: RouterURL): Promise<void> {
       const data = await resp.json()
       if (util.isPlainObject(data)) {
         storeData(href, data)
+        if (!staticSsrRoutes) {
+          lazySsrRoutes.set(url.routePath, true)
+        }
+      }
+    } else if (resp.status === 404) {
+      if (!staticSsrRoutes) {
+        lazySsrRoutes.set(url.routePath, false)
       }
     }
   } catch (err) {
-    console.error(err)
+    console.error('loadPageData:', err)
   }
 }
 
@@ -46,7 +65,9 @@ export function loadSSRDataFromTag(url: RouterURL) {
         storeData(href, ssrData)
         return
       }
-    } catch (e) { }
+    } catch (e) {
+      console.warn('ssr-data: invalid JSON')
+    }
   }
 }