Fix ssr data loading

Author: ije

framework/core/routing.ts

@@ -12,7 +12,7 @@ export type Route = {
 
 export type RouteModule = {
   readonly url: string
-  readonly useDeno?: boolean
+  readonly withData?: boolean
 }
 
 export type RoutingOptions = {
@@ -67,7 +67,7 @@ export class Routing {
     })
   }
 
-  update(path: string, moduleUrl: string, options: { isIndex?: boolean, useDeno?: boolean } = {}) {
+  update(path: string, moduleUrl: string, options: { isIndex?: boolean, withData?: boolean } = {}) {
     const { isIndex, ...rest } = options
     const newRoute: Route = {
       path: path === '/' ? path : util.trimSuffix(path, '/') + (options.isIndex ? '/' : ''),

framework/react/bootstrap.ts

@@ -14,15 +14,15 @@ type BootstrapOptions = Required<RoutingOptions> & {
 export default async function bootstrap(options: BootstrapOptions) {
   const { basePath, defaultLocale, locales, routes, rewrites, sharedModules, renderMode } = options
   const { document } = window as any
-  const customComponents: Record<string, { C: ComponentType, useDeno?: boolean }> = {}
-  await Promise.all(sharedModules.map(async ({ url, useDeno }) => {
+  const customComponents: Record<string, { C: ComponentType, withData?: boolean }> = {}
+  await Promise.all(sharedModules.map(async ({ url, withData }) => {
     const { default: C } = await importModule(basePath, url)
     switch (trimModuleExt(url)) {
       case '/404':
-        customComponents['E404'] = { C, useDeno }
+        customComponents['E404'] = { C, withData }
         break
       case '/app':
-        customComponents['App'] = { C, useDeno }
+        customComponents['App'] = { C, withData }
         break
     }
   }))
@@ -35,7 +35,7 @@ export default async function bootstrap(options: BootstrapOptions) {
       Component
     }
   })
-  if (!!customComponents.App?.useDeno || nestedModules.findIndex(mod => !!mod.useDeno) > -1) {
+  if (!!customComponents.App?.withData || nestedModules.findIndex(mod => !!mod.withData) > -1) {
     await loadPageDataFromTag(url)
   }
   const pageRoute: PageRoute = { ...createPageProps(await Promise.all(imports)), url }

framework/react/components/Router.ts

@@ -20,11 +20,11 @@ export default function Router({
   pageRoute,
   routing,
 }: {
-  customComponents: Record<'E404' | 'App', { C: ComponentType, useDeno?: boolean }>
+  customComponents: Record<'E404' | 'App', { C: ComponentType, withData?: boolean }>
   pageRoute: PageRoute,
   routing: Routing
 }) {
-  const appUseDeno = !!customComponents.App?.useDeno
+  const appWithData = !!customComponents.App?.withData
   const [e404, setE404] = useState<{ Component: ComponentType<any>, props?: Record<string, any> }>(() => {
     const { E404 } = customComponents
     if (E404) {
@@ -57,7 +57,7 @@ export default function Router({
           Component
         }
       })
-      if (appUseDeno || nestedModules.findIndex(mod => !!mod.useDeno) > -1) {
+      if (appWithData || nestedModules.findIndex(mod => !!mod.withData) > -1) {
         await loadPageData(url)
       }
       setRoute({ ...createPageProps(await Promise.all(imports)), url })
@@ -135,7 +135,7 @@ export default function Router({
         nestedModules.map(mod => {
           importModule(basePath, mod.url)
         })
-        if (appUseDeno || nestedModules.findIndex(mod => !!mod.useDeno) > -1) {
+        if (appWithData || nestedModules.findIndex(mod => !!mod.withData) > -1) {
           loadPageData(url)
         }
       }

server/app.ts

@@ -316,30 +316,27 @@ export class Application implements ServerApplication {
                 }
                 if (hmrable) {
                   let routePath: string | undefined = undefined
-                  let useDeno: boolean | undefined = undefined
+                  let withData: boolean | undefined = undefined
                   let isIndex: boolean | undefined = undefined
                   if (module.url.startsWith('/pages/')) {
                     const [path, _, options] = this.createRouteUpdate(module.url)
                     routePath = path
-                    useDeno = options.useDeno
+                    withData = options.withData
                     isIndex = options.isIndex
                   } else {
                     if (['/app', '/404'].includes(trimModuleExt(module.url))) {
-                      this.lookupDeps(module.url, dep => {
-                        if (this.getModule(dep.url)?.useDenoHook) {
-                          useDeno = true
-                          return false
-                        }
-                      })
+                      if (this.hasSSRData(module.url)) {
+                        withData = true
+                      }
                     }
                   }
                   if (type === 'add') {
                     this.#fsWatchListeners.forEach(e => {
-                      e.emit('add', { url: module.url, routePath, isIndex, useDeno })
+                      e.emit('add', { url: module.url, routePath, isIndex, withData })
                     })
                   } else {
                     this.#fsWatchListeners.forEach(e => {
-                      e.emit('modify-' + module.url, { useDeno })
+                      e.emit('modify-' + module.url, { withData })
                     })
                   }
                 }
@@ -603,16 +600,13 @@ export class Application implements ServerApplication {
       sharedModules: Array.from(this.#modules.values()).filter(({ url }) => {
         return ['/app', '/404'].includes(trimModuleExt(url))
       }).map(({ url }) => {
-        let useDeno: boolean | undefined = undefined
+        let withData: boolean | undefined = undefined
         if (this.config.ssr !== false) {
-          this.lookupDeps(url, dep => {
-            if (this.getModule(dep.url)?.useDenoHook) {
-              useDeno = true
-              return false
-            }
-          })
+          if (this.hasSSRData(url)) {
+            withData = true
+          }
         }
-        return { url, useDeno }
+        return { url, withData }
       }),
       renderMode: this.config.ssr ? 'ssr' : 'spa'
     }
@@ -786,19 +780,16 @@ export class Application implements ServerApplication {
     log.info(`Done in ${Math.round(performance.now() - start)}ms`)
   }
 
-  private createRouteUpdate(url: string): [string, string, { isIndex?: boolean, useDeno?: boolean }] {
+  private createRouteUpdate(url: string): [string, string, { isIndex?: boolean, withData?: boolean }] {
     const isBuiltinModule = moduleExts.some(ext => url.endsWith('.' + ext))
     let routePath = isBuiltinModule ? toPagePath(url) : util.trimSuffix(url, '/pages')
-    let useDeno: boolean | undefined = undefined
+    let withData: boolean | undefined = undefined
     let isIndex: boolean | undefined = undefined
 
-    if (this.config.ssr !== false) {
-      this.lookupDeps(url, dep => {
-        if (this.getModule(dep.url)?.useDenoHook) {
-          useDeno = true
-          return false
-        }
-      })
+    if (this.config.ssr !== false && !url.startsWith('/api/')) {
+      if (this.hasSSRData(url)) {
+        withData = true
+      }
     }
 
     if (!isBuiltinModule) {
@@ -823,7 +814,7 @@ export class Application implements ServerApplication {
       }
     }
 
-    return [routePath, url, { isIndex, useDeno }]
+    return [routePath, url, { isIndex, withData }]
   }
 
   /** fetch resource by the url. */
@@ -1403,6 +1394,21 @@ export class Application implements ServerApplication {
     return ssr
   }
 
+  private hasSSRData(url: string) {
+    let hasData = false
+    if (this.getModule(url)?.useDenoHook) {
+      hasData = true
+    } else {
+      this.lookupDeps(url, dep => {
+        if (this.getModule(dep.url)?.useDenoHook) {
+          hasData = true
+          return false
+        }
+      })
+    }
+    return hasData
+  }
+
   /** lookup app deps recurively. */
   lookupDeps(
     url: string,