feat: support ISR (#135)

Author: ije

framework/core/style.ts

@@ -22,7 +22,7 @@ export function recoverCSS(id: string) {
 }
 
 export function applyCSS(id: string, css: string) {
-  if (util.inDeno()) {
+  if (util.inDeno) {
     serverStyles.set(id, css)
   } else {
     const { document } = window as any

framework/react/bootstrap.ts

@@ -2,7 +2,7 @@ import { ComponentType, createElement } from 'https://esm.sh/react'
 import { hydrate, render } from 'https://esm.sh/react-dom'
 import { importModule, trimModuleExt } from '../core/module.ts'
 import { RouteModule, Routing, RoutingOptions } from '../core/routing.ts'
-import { loadPageDataFromTag } from './helper.ts'
+import { loadPageDataFromTag } from './pagedata.ts'
 import { createPageProps, PageRoute } from './pageprops.ts'
 import Router from './router.ts'
 

framework/react/head.ts

@@ -19,7 +19,7 @@ export default function Head(props: PropsWithChildren<{}>) {
   const renderer = useContext(SSRContext)
   const [els, forwardNodes] = useMemo(() => parse(props.children), [props.children])
 
-  if (util.inDeno()) {
+  if (util.inDeno) {
     els.forEach(({ type, props }, key) => renderer.headElements.set(key, { type, props }))
   }
 

framework/react/helper.ts

@@ -1,10 +1,8 @@
 import { createContext } from 'https://esm.sh/react'
 import util from '../../shared/util.ts'
-import type { RouterURL } from '../../types.ts'
 
-const symbolFor = typeof Symbol === 'function' && Symbol.for
-const REACT_FORWARD_REF_TYPE = symbolFor ? Symbol.for('react.forward_ref') : 0xead0
-const REACT_MEMO_TYPE = symbolFor ? Symbol.for('react.memo') : 0xead3
+const REACT_FORWARD_REF_TYPE = util.supportSymbolFor ? Symbol.for('react.forward_ref') : 0xead0
+const REACT_MEMO_TYPE = util.supportSymbolFor ? Symbol.for('react.memo') : 0xead3
 
 export function isLikelyReactComponent(type: any): Boolean {
   switch (typeof type) {
@@ -41,31 +39,6 @@ export function isLikelyReactComponent(type: any): Boolean {
   }
 }
 
-export async function loadPageData({ pathname }: RouterURL): Promise<void> {
-  const url = `/_aleph/data${pathname === '/' ? '/index' : pathname}.json`
-  const data = await fetch(url).then(resp => resp.json())
-  if (util.isPlainObject(data)) {
-    for (const key in data) {
-      Object.assign(window, { [`data://${pathname}#${key}`]: data[key] })
-    }
-  }
-}
-
-export async function loadPageDataFromTag(url: RouterURL) {
-  const { document } = window as any
-  const ssrDataEl = document.getElementById('ssr-data')
-  if (ssrDataEl) {
-    try {
-      const ssrData = JSON.parse(ssrDataEl.innerText)
-      for (const key in ssrData) {
-        Object.assign(window, { [`data://${url.pathname}#${key}`]: ssrData[key] })
-      }
-      return
-    } catch (e) { }
-  }
-  await loadPageData(url)
-}
-
 export function createNamedContext<T>(defaultValue: T, name: string) {
   const ctx = createContext<T>(defaultValue)
   ctx.displayName = name // show in devTools

framework/react/hooks.ts

@@ -37,14 +37,14 @@ export function useDeno<T = any>(callback: () => (T | Promise<T>), revalidate?:
   const { pathname } = useRouter()
   return useMemo(() => {
     const global = globalThis as any
-    const dataUrl = 'data://' + pathname
+    const dataUrl = 'pagedata://' + pathname
     const eventName = 'useDeno-' + dataUrl
     const key = dataUrl + '#' + id
     const expires = revalidate ? Date.now() + revalidate * 1000 : 0
     const renderingDataCache = global['rendering-' + dataUrl]
     if (renderingDataCache && key in renderingDataCache) {
       return renderingDataCache[key] // 2+ pass
-    } else if (util.inDeno()) {
+    } else if (util.inDeno) {
       const v = callback()
       if (v instanceof Promise) {
         events.emit(eventName, id, v.then(value => {

framework/react/pagedata.ts

@@ -0,0 +1,48 @@
+import util from '../../shared/util.ts'
+import type { RouterURL } from '../../types.ts'
+
+const global = window as any
+
+export async function loadPageData({ pathname }: RouterURL): Promise<void> {
+  if (`pagedata://${pathname}` in global) {
+    const { expires, keys } = global[`pagedata://${pathname}`]
+    if (expires === 0 || Date.now() < expires) {
+      return
+    }
+    delete global[`pagedata://${pathname}`]
+    keys.forEach((key: string) => {
+      delete global[`pagedata://${pathname}#key`]
+    })
+  }
+  const url = `/_aleph/data${pathname === '/' ? '/index' : pathname}.json`
+  const data = await fetch(url).then(resp => resp.json())
+  if (util.isPlainObject(data)) {
+    storeData(data, pathname)
+  }
+}
+
+export async function loadPageDataFromTag(url: RouterURL) {
+  const ssrDataEl = global.document.getElementById('ssr-data')
+  if (ssrDataEl) {
+    try {
+      const ssrData = JSON.parse(ssrDataEl.innerText)
+      if (util.isPlainObject(ssrData)) {
+        storeData(ssrData, url.pathname)
+        return
+      }
+    } catch (e) { }
+  }
+  await loadPageData(url)
+}
+
+function storeData(data: any, pathname: string) {
+  let expires = 0
+  for (const key in data) {
+    const { expires: _expires } = data[key]
+    if (expires === 0 || (_expires > 0 && _expires < expires)) {
+      expires = _expires
+    }
+    global[`pagedata://${pathname}#${key}`] = data[key]
+  }
+  global[`pagedata://${pathname}`] = { expires, keys: Object.keys(data) }
+}

framework/react/renderer.ts

@@ -31,20 +31,20 @@ export async function render(
     headElements: new Map(),
     scriptElements: new Map(),
   }
-  const dataUrl = 'data://' + url.pathname
+  const pagedataUrl = 'pagedata://' + url.pathname
   const asyncCalls: Array<Promise<any>> = []
   const data: Record<string, any> = {}
   const pageProps = createPageProps(nestedPageComponents)
   const defer = () => {
-    delete global['rendering-' + dataUrl]
-    events.removeAllListeners('useDeno-' + dataUrl)
+    delete global['rendering-' + pagedataUrl]
+    events.removeAllListeners('useDeno-' + pagedataUrl)
   }
 
   // rendering data cache
-  global['rendering-' + dataUrl] = {}
+  global['rendering-' + pagedataUrl] = {}
 
   // listen `useDeno-*` events to get hooks callback result.
-  events.on('useDeno-' + dataUrl, (id: string, v: any) => {
+  events.on('useDeno-' + pagedataUrl, (id: string, v: any) => {
     if (v instanceof Promise) {
       asyncCalls.push(v)
     } else {

framework/react/router.ts

@@ -10,7 +10,8 @@ import { importModule } from '../core/module.ts'
 import { RouteModule, Routing } from '../core/routing.ts'
 import { RouterContext } from './context.ts'
 import { E400MissingComponent, E404Page, ErrorBoundary } from './error.ts'
-import { isLikelyReactComponent, loadPageData } from './helper.ts'
+import { isLikelyReactComponent } from './helper.ts'
+import { loadPageData } from './pagedata.ts'
 import type { PageRoute } from './pageprops.ts'
 import { createPageProps } from './pageprops.ts'
 

framework/react/script.ts

@@ -9,7 +9,7 @@ import { SSRContext } from './context.ts'
 export default function Script(props: PropsWithChildren<ScriptHTMLAttributes<{}>>) {
   const { scriptElements } = useContext(SSRContext)
 
-  if (util.inDeno()) {
+  if (util.inDeno) {
     const key = 'script-' + (scriptElements.size + 1)
     scriptElements.set(key, { props })
   }

server/ssr.ts

@@ -5,12 +5,22 @@ import util from '../shared/util.ts'
 import type { RouterURL } from '../types.ts'
 import type { Application } from './app.ts'
 
+export type SSRData = {
+  expires: number
+  value: any
+}
+
+export type SSROutput = {
+  html: string
+  data: Record<string, SSRData> | null
+}
+
 /** The framework render result of SSR. */
 export type FrameworkRenderResult = {
   head: string[]
   body: string
   scripts: Record<string, any>[]
-  data: Record<string, string> | null
+  data: Record<string, SSRData> | null
 }
 
 /** The framework renderer for SSR. */
@@ -26,7 +36,7 @@ export type FrameworkRenderer = {
 export class Renderer {
   #app: Application
   #renderer: FrameworkRenderer
-  #cache: Map<string, Map<string, [string, any]>>
+  #cache: Map<string, Map<string, SSROutput>>
 
   constructor(app: Application) {
     this.#app = app
@@ -41,25 +51,36 @@ export class Renderer {
   async useCache(
     namespace: string,
     key: string,
-    render: () => Promise<[string, any]>
+    render: () => Promise<[string, Record<string, SSRData> | null]>
   ): Promise<[string, any]> {
     let cache = this.#cache.get(namespace)
     if (cache === undefined) {
       cache = new Map()
       this.#cache.set(namespace, cache)
     }
-    const cached = cache.get(key)
-    if (cached !== undefined) {
-      return cached
+    if (cache.has(key)) {
+      const { html, data } = cache.get(key)!
+      let expires = 0
+      if (data !== null) {
+        Object.values(data).forEach(({ expires: _expires }) => {
+          if (expires === 0 || (_expires > 0 && _expires < expires)) {
+            expires = _expires
+          }
+        })
+      }
+      if (expires === 0 || Date.now() < expires) {
+        return [html, data]
+      }
+      cache.delete(key)
     }
-    const ret = await render()
+    let [html, data] = await render()
     if (namespace !== '-') {
       this.#app.getCodeInjects('ssr')?.forEach(transform => {
-        ret[0] = transform(key, ret[0])
+        html = transform(key, html)
       })
     }
-    cache.set(key, ret)
-    return ret
+    cache.set(key, { html, data })
+    return [html, data]
   }
 
   clearCache(url?: string) {
@@ -71,7 +92,7 @@ export class Renderer {
   }
 
   /** render page base the given location. */
-  async renderPage(url: RouterURL, nestedModules: RouteModule[]): Promise<[string, any]> {
+  async renderPage(url: RouterURL, nestedModules: RouteModule[]): Promise<[string, Record<string, SSRData> | null]> {
     const start = performance.now()
     const isDev = this.#app.isDev
     const appModule = this.#app.findModuleByName('app')