WIP: Use react-ssr-prepass to fetchData

TODO: State does not update correctly. Need to figure out why.

package-lock.json

@@ -10719,6 +10719,12 @@
         }
       }
     },
+    "object-is": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
+      "integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
+      "dev": true
+    },
     "object-keys": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
@@ -11873,6 +11879,15 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-ssr-prepass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-ssr-prepass/-/react-ssr-prepass-1.0.5.tgz",
+      "integrity": "sha512-A8QXXIHBpzr5/bnG3rwFgJWU6gLo7/dcW1bBIluoBI2hMyC+uuMRO+rXEtUpX6AVDhWfdFVi2I7kvWUDIRgDtA==",
+      "dev": true,
+      "requires": {
+        "object-is": "^1.0.1"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

package.json

@@ -62,6 +62,7 @@
     "react-redux": "^6.0.0",
     "react-router-config": "^5.0.0",
     "react-router-dom": "^4.3.1",
+    "react-ssr-prepass": "^1.0.5",
     "redux": "^4.0.1",
     "sanitize-html": "^1.20.0",
     "sourceify": "git+https://github.com/jeremija/sourceify.git#sources-content",

packages/client/src/renderer/ServerRenderer.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import ssrPrepass from 'react-ssr-prepass'
 import {Action} from 'redux'
 import {IAPIDef} from '@rondo/common'
 import {IClientConfig} from './IClientConfig'
@@ -18,17 +19,23 @@ export class ServerRenderer<A extends Action, D extends IAPIDef>
       http: IHTTPClient<D>
     }>,
   ) {}
-  render<State>(
+  async render<State>(
     url: string,
     store: Store<State>,
     config: IClientConfig,
     host: string = '',
+    headers: Record<string, string> = {},
   ) {
     const {RootComponent} = this
-    const http = new HTTPClient<D>(host + config.baseUrl + '/api')
+    // TODO set cookie in headers here...
+    const http = new HTTPClient<D>(
+      'http://' + host + config.baseUrl + '/api',
+      headers,
+    )
 
     const context: StaticRouterContext = {}
-    const stream = renderToNodeStream(
+
+    const element = (
       <Provider store={store}>
         <StaticRouter
           basename={config.baseUrl}
@@ -37,8 +44,17 @@ export class ServerRenderer<A extends Action, D extends IAPIDef>
         >
           <RootComponent config={config} http={http} />
         </StaticRouter>
-      </Provider>,
+      </Provider>
     )
+
+    console.log('prepass')
+    await ssrPrepass(element, async (el, component) => {
+      if (component && 'fetchData' in component) {
+        await (component as any).fetchData()
+      }
+    })
+    console.log('prepass done')
+    const stream = renderToNodeStream(element)
     return stream
   }
 }

packages/client/types/react-ssr-prepass.d.ts

@@ -0,0 +1,12 @@
+declare module 'react-ssr-prepass' {
+  import {Component, ReactElement} from 'react'
+
+  export type Visitor = (
+    element: ReactElement,
+    instance?: Component,
+  ) => void | Promise<any>
+
+  function ssrPrepass(node: ReactElement, visitor?: Visitor): Promise<void>
+
+  export = ssrPrepass
+}