Fix SSR data passing (#383)

Nkzn · web-flow · commit 2d5f897e92da · 2021-09-10T21:21:18.000+08:00
* fix(framework/react): load ssr-data before creating page props

* feat: add hello-world-ssr
diff --git a/examples/hello-world-ssr/app.tsx b/examples/hello-world-ssr/app.tsx
@@ -0,0 +1,12 @@
+import React, { ComponentType } from 'react'
+
+export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+  return (
+    <main>
+      <head>
+        <meta name="viewport" content="width=device-width" />
+      </head>
+      <Page {...pageProps} />
+    </main>
+  )
+}
diff --git a/examples/hello-world-ssr/pages/index.tsx b/examples/hello-world-ssr/pages/index.tsx
@@ -0,0 +1,20 @@
+import React from 'https://esm.sh/react'
+import type { SSROptions } from 'https://deno.land/x/aleph/types.d.ts'
+
+export const ssr: SSROptions = {
+  props: async router => {
+    return {
+      $revalidate: 1, // revalidate props after 1 second
+      serverTime: Date.now()
+    }
+  },
+  paths: async () => {
+    return []
+  }
+}
+
+export default function Page(props) {
+  return (
+    <p>Now: {props.serverTime}</p>
+  )
+}
diff --git a/framework/react/bootstrap.ts b/framework/react/bootstrap.ts
@@ -19,6 +19,13 @@ export default async function bootstrap(options: BootstrapOptions) {
   const routing = new Routing({ routes, rewrites, basePath, defaultLocale, locales, redirect })
   const [url, nestedModules] = routing.createRouter()
   const components = await importPageModules(url, nestedModules)
+
+  if (renderMode === 'ssr') {
+    // restore ssr-data from HTML
+    // must be called before creating page props
+    loadSSRDataFromTag(url)
+  }
+
   const pageRoute = createPageRoute(url, components)
   const routerEl = createElement(Router, { appModule, pageRoute, routing })
   const mountPoint = document.getElementById('__aleph')
@@ -27,7 +34,6 @@ export default async function bootstrap(options: BootstrapOptions) {
     if (dataRoutes) {
       setStaticDataRoutes(dataRoutes)
     }
-    loadSSRDataFromTag(url)
     hydrate(routerEl, mountPoint)
   } else {
     render(routerEl, mountPoint)
