Introducing Multi-threading

package.json

@@ -51,4 +51,4 @@
     "playwright-chromium": "^1.25.0",
     "wds": "^0.12.0"
   }
-}
+}

packages/fastify-renderer/package.json

@@ -68,8 +68,10 @@
     "path-to-regexp": "^6.2.1",
     "sanitize-filename": "^1.6.3",
     "stream-template": "^0.0.10",
+    "ts-node": "^10.9.1",
     "vite": "^2.9.15",
-    "wouter": "^2.7.5"
+    "wouter": "^2.7.5",
+    "resource-pooler": "^0.1.0"
   },
   "peerDependencies": {
     "fastify": "^3.13.0",
@@ -113,4 +115,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

packages/fastify-renderer/src/client/tsconfig.json

@@ -3,7 +3,13 @@
   "compilerOptions": {
     "outDir": "../../client",
     "module": "esnext",
-    "types": ["react/experimental", "react-dom/experimental"],
-    "lib": ["ESNext", "DOM"]
+    "types": [
+      "react/experimental",
+      "react-dom/experimental"
+    ],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ]
   }
-}
+}

packages/fastify-renderer/src/node/Plugin.ts

@@ -77,7 +77,12 @@ export class FastifyRendererPlugin {
    * Implements the backend integration logic for vite -- pulls out the chain of imported modules from the vite manifest and generates <script/> or <link/> tags to source the assets in the browser.
    **/
   pushImportTagsFromManifest = (bus: RenderBus, entryName: string, root = true) => {
-    const manifestEntry = this.clientManifest![entryName]
+    let manifestEntry = this.clientManifest![entryName]
+    if (!manifestEntry) {
+      // TODO: Refactor this away
+      const closestName = Object.keys(this.clientManifest!).find((k) => entryName.startsWith(k))
+      if (closestName) manifestEntry = this.clientManifest![closestName]
+    }
     if (!manifestEntry) {
       throw new Error(
         `Module id ${entryName} was not found in the built assets manifest. Was it included in the build?`

packages/fastify-renderer/src/node/renderers/react/ReactRenderer.tsx

@@ -1,16 +1,19 @@
 import reactRefresh from '@vitejs/plugin-react-refresh'
 import path from 'path'
 import querystring from 'querystring'
-import type { ReactElement } from 'react'
+import { createPool, ResourcePooler } from 'resource-pooler'
+import { PassThrough } from 'stream'
 import { URL } from 'url'
 import { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 import { normalizePath } from 'vite/dist/node'
+import { Worker } from 'worker_threads'
 import { FastifyRendererPlugin } from '../../Plugin'
 import { RenderBus } from '../../RenderBus'
 import { wrap } from '../../tracing'
 import { FastifyRendererHook } from '../../types'
 import { mapFilepathToEntrypointName, unthunk } from '../../utils'
 import { Render, RenderableRegistration, Renderer, scriptTag } from '../Renderer'
+import { staticRender, streamingRender } from './ssr'
 
 const CLIENT_ENTRYPOINT_PREFIX = '/@fstr!entrypoint:'
 const SERVER_ENTRYPOINT_PREFIX = '/@fstr!server-entrypoint:'
@@ -20,22 +23,6 @@ export interface ReactRendererOptions {
   mode: 'sync' | 'streaming'
 }
 
-const staticLocationHook = (path = '/', { record = false } = {}) => {
-  // eslint-disable-next-line prefer-const
-  let hook
-  const navigate = (to, { replace }: { replace?: boolean } = {}) => {
-    if (record) {
-      if (replace) {
-        hook.history.pop()
-      }
-      hook.history.push(to)
-    }
-  }
-  hook = () => [path, navigate]
-  hook.history = [path]
-  return hook
-}
-
 export class ReactRenderer implements Renderer {
   static ROUTE_TABLE_ID = '/@fstr!route-table.js'
 
@@ -44,6 +31,8 @@ export class ReactRenderer implements Renderer {
   renderables!: RenderableRegistration[]
   tmpdir!: string
   clientModulePath: string
+  workerPool: ResourcePooler<Worker, Worker> | null = null
+  transformHooks: string[] = []
 
   constructor(readonly plugin: FastifyRendererPlugin, readonly options: ReactRendererOptions) {
     this.clientModulePath = require.resolve('../../../client/react')
@@ -69,14 +58,111 @@ export class ReactRenderer implements Renderer {
       for (const renderable of renderables) {
         await this.loadModule(this.entrypointRequirePathForServer(renderable))
       }
+
+      const mode = this.options.mode
+      this.transformHooks = this.plugin.hooks
+        .map(unthunk)
+        .map((hook) => hook.transform?.absolutePath)
+        .flatMap((hook) => (hook ? [hook] : []))
+
+      const modulePaths = await this.getPreloadPaths()
+      const paths = [...modulePaths, ...this.transformHooks]
+
+      this.workerPool = await createPool({
+        create() {
+          const workerData = {
+            paths,
+          }
+
+          let worker: Worker
+          switch (mode) {
+            case 'streaming':
+              worker = new Worker(require.resolve('./StreamingWorker.import.js'), {
+                workerData,
+              })
+            case 'sync':
+              worker = new Worker(require.resolve('./StaticWorker.import.js'), {
+                workerData,
+              })
+          }
+
+          return worker
+        },
+        async dispose(worker) {
+          await worker.terminate()
+        },
+      })
     }
   }
 
   /** The purpose of adding this function is to allow us to spy on this method, otherwise it isn't available in the class prototype */
   async render<Props>(render: Render<Props>): Promise<void> {
     return this.wrappedRender(render)
   }
+  private workerStreamRender<Props>(render: Render<Props>): NodeJS.ReadableStream {
+    const requirePath = this.entrypointRequirePathForServer(render)
+
+    const destination = this.stripBasePath(render.request.url, render.base)
+    if (!this.workerPool) throw new Error('WorkerPool not setup')
+    const passthrough = new PassThrough()
+
+    // Do not `await` or else it will not return
+    // until the whole stream is completed
+    void this.workerPool.use(
+      (worker) =>
+        new Promise<void>((resolve) => {
+          worker.postMessage({
+            modulePath: path.join(this.plugin.serverOutDir, mapFilepathToEntrypointName(requirePath)),
+            renderBase: render.base,
+            bootProps: render.props,
+            destination,
+            mode: this.options.mode,
+            hooks: this.transformHooks,
+          })
+          worker.on('message', (content) => {
+            if (content) {
+              passthrough.write(content)
+            } else {
+              passthrough.end()
+              resolve()
+            }
+          })
+          worker.on('error', (error) => passthrough.destroy(error))
+        })
+    )
 
+    return passthrough
+  }
+  private async getPreloadPaths() {
+    return this.renderables.map((renderable) =>
+      path.join(this.plugin.serverOutDir, mapFilepathToEntrypointName(this.entrypointRequirePathForServer(renderable)))
+    )
+  }
+  private async workerRender<Props>(render: Render<Props>) {
+    const requirePath = this.entrypointRequirePathForServer(render)
+
+    const destination = this.stripBasePath(render.request.url, render.base)
+
+    if (!this.workerPool) throw new Error('WorkerPool is not setup')
+
+    return this.workerPool.use((worker) => {
+      worker.postMessage({
+        modulePath: path.join(this.plugin.serverOutDir, mapFilepathToEntrypointName(requirePath)),
+        renderBase: render.base,
+        bootProps: render.props,
+        destination,
+        mode: this.options.mode,
+        hooks: this.transformHooks,
+      })
+      return new Promise<string>((resolve, reject) => {
+        worker
+          .once('message', (content) => {
+            resolve(content as string)
+          })
+          .once('error', (error) => reject(error))
+      })
+    })
+  }
   /** Renders a given request and sends the resulting HTML document out with the `reply`. */
   private wrappedRender = wrap('fastify-renderer.render', async <Props,>(render: Render<Props>): Promise<void> => {
     const bus = this.startRenderBus(render)
@@ -85,44 +171,39 @@ export class ReactRenderer implements Renderer {
     try {
       const requirePath = this.entrypointRequirePathForServer(render)
 
-      // we load all the context needed for this render from one `loadModule` call, which is really important for keeping the same copy of React around in all of the different bits that touch it.
-      const { React, ReactDOMServer, Router, RenderBusContext, Layout, Entrypoint } = (
-        await this.loadModule(requirePath)
-      ).default
-
       const destination = this.stripBasePath(render.request.url, render.base)
 
-      let app: ReactElement = React.createElement(
-        RenderBusContext.Provider,
-        null,
-        React.createElement(
-          Router,
-          {
-            base: render.base,
-            hook: staticLocationHook(destination),
-          },
-          React.createElement(
-            Layout,
-            {
-              isNavigating: false,
-              navigationDestination: destination,
+      switch (this.options.mode) {
+        case 'streaming': {
+          const devRender = async () =>
+            streamingRender({
+              module: (await this.devServer!.ssrLoadModule(requirePath)).default,
+              renderBase: render.base,
               bootProps: render.props,
-            },
-            React.createElement(Entrypoint, render.props)
-          )
-        )
-      )
+              destination,
+              hooks: this.transformHooks,
+            })
+
+          const prodRender = () => this.workerStreamRender(render)
+          const stream = await (this.plugin.devMode ? devRender() : prodRender())
 
-      for (const hook of hooks) {
-        if (hook.transform) {
-          app = hook.transform(app)
+          await render.reply.send(this.renderStreamingTemplate(stream, bus, render, hooks))
+          break
         }
-      }
+        case 'sync': {
+          const devRender = async () =>
+            staticRender({
+              module: (await this.devServer!.ssrLoadModule(requirePath)).default,
+              renderBase: render.base,
+              bootProps: render.props,
+              destination,
+              hooks: this.transformHooks,
+            })
 
-      if (this.options.mode == 'streaming') {
-        await render.reply.send(this.renderStreamingTemplate(app, bus, ReactDOMServer, render, hooks))
-      } else {
-        await render.reply.send(this.renderSynchronousTemplate(app, bus, ReactDOMServer, render, hooks))
+          const prodRender = () => this.workerRender(render)
+          const content = await (this.plugin.devMode ? devRender() : prodRender())
+          await render.reply.send(this.renderSynchronousTemplate(content, bus, render, hooks))
+        }
       }
     } catch (error: unknown) {
       this.devServer?.ssrFixStacktrace(error as Error)
@@ -223,17 +304,16 @@ export class ReactRenderer implements Renderer {
   }
 
   private renderStreamingTemplate<Props>(
-    app: JSX.Element,
+    contentStream: NodeJS.ReadableStream,
     bus: RenderBus,
-    ReactDOMServer: any,
     render: Render<Props>,
     hooks: FastifyRendererHook[]
   ) {
     this.runHeadHooks(bus, hooks)
     // There are not postRenderHead hooks for streaming templates
     // so let's end the head stack
     bus.push('head', null)
-    const contentStream = ReactDOMServer.renderToNodeStream(app)
+
     contentStream.on('end', () => {
       this.runTailHooks(bus, hooks)
     })
@@ -249,14 +329,12 @@ export class ReactRenderer implements Renderer {
   }
 
   private renderSynchronousTemplate<Props>(
-    app: JSX.Element,
+    content: string,
     bus: RenderBus,
-    ReactDOMServer: any,
     render: Render<Props>,
     hooks: FastifyRendererHook[]
   ) {
     this.runHeadHooks(bus, hooks)
-    const content = ReactDOMServer.renderToString(app)
     this.runPostRenderHeadHooks(bus, hooks)
     this.runTailHooks(bus, hooks)
 

packages/fastify-renderer/src/node/renderers/react/StaticWorker.import.js

@@ -0,0 +1,7 @@
+// Context: https://github.com/TypeStrong/ts-node/issues/676#issuecomment-470898116
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+require('ts-node').register({
+  // Disable type-checking
+  transpileOnly: true,
+})
+require(require.resolve('./StaticWorker.ts'))

packages/fastify-renderer/src/node/renderers/react/StaticWorker.ts

@@ -0,0 +1,12 @@
+import { parentPort } from 'worker_threads'
+import { WorkerRenderInput } from '../../types'
+import { staticRender } from './ssr'
+
+if (!parentPort) throw new Error('Missing parentPort')
+const port = parentPort
+
+port.on('message', (args: WorkerRenderInput) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const content = staticRender({ ...args, module: require(args.modulePath).default })
+  port.postMessage(content)
+})

packages/fastify-renderer/src/node/renderers/react/StreamingWorker.import.js

@@ -0,0 +1,7 @@
+// Context: https://github.com/TypeStrong/ts-node/issues/676#issuecomment-470898116
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+require('ts-node').register({
+  // Disable type-checking
+  transpileOnly: true,
+})
+require(require.resolve('./StreamingWorker.ts'))

packages/fastify-renderer/src/node/renderers/react/StreamingWorker.ts

@@ -0,0 +1,17 @@
+import { parentPort } from 'worker_threads'
+import { WorkerRenderInput } from '../../types'
+import { streamingRender } from './ssr'
+
+if (!parentPort) throw new Error('Missing parentPort')
+const port = parentPort
+
+port.on('message', (args: WorkerRenderInput) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const stream = streamingRender({ ...args, module: require(args.modulePath).default })
+
+  stream.on('data', (content) => {
+    port.postMessage(content)
+  })
+
+  stream.on('end', () => port.postMessage(null))
+})