unthunk hooks on every render

Author: Jason Gao

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

@@ -9,7 +9,6 @@ import { ReactRenderer, ReactRendererOptions } from './renderers/react/ReactRend
 import { RenderableRoute, Renderer } from './renderers/Renderer'
 import './types' // necessary to make sure that the fastify types are augmented
 import { FastifyRendererHook, ServerEntrypointManifest, ViteClientManifest } from './types'
-import { unthunk } from './utils'
 
 export interface FastifyRendererOptions {
   renderer?: ReactRendererOptions
@@ -31,7 +30,7 @@ export class FastifyRendererPlugin {
   clientOutDir: string
   serverOutDir: string
   assetsHost: string
-  hooks: FastifyRendererHook[]
+  hooks: (FastifyRendererHook | (() => FastifyRendererHook))[]
   clientManifest?: ViteClientManifest
   serverEntrypointManifest?: ServerEntrypointManifest
   routes: RenderableRoute[] = []
@@ -43,7 +42,7 @@ export class FastifyRendererPlugin {
     this.vite.base ??= '/.vite/'
     this.viteBase = this.vite.base
     this.assetsHost = incomingOptions.assetsHost || ''
-    this.hooks = (incomingOptions.hooks || []).map(unthunk)
+    this.hooks = incomingOptions.hooks || []
 
     const outDir = incomingOptions.outDir || path.join(process.cwd(), 'dist')
     this.clientOutDir = path.join(outDir, 'client', this.viteBase)

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

@@ -7,7 +7,8 @@ import { normalizePath } from 'vite/dist/node'
 import { FastifyRendererPlugin } from '../../Plugin'
 import { RenderBus } from '../../RenderBus'
 import { wrap } from '../../tracing'
-import { mapFilepathToEntrypointName } from '../../utils'
+import { FastifyRendererHook } from '../../types'
+import { mapFilepathToEntrypointName, unthunk } from '../../utils'
 import { Render, RenderableRoute, Renderer } from '../Renderer'
 
 const CLIENT_ENTRYPOINT_PREFIX = '/@fstr!entrypoint:'
@@ -79,6 +80,7 @@ export class ReactRenderer implements Renderer {
   /** 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)
+    const hooks = this.plugin.hooks.map(unthunk)
 
     try {
       const url = this.entrypointRequirePathForServer(render)
@@ -97,16 +99,16 @@ export class ReactRenderer implements Renderer {
         </RenderBusContext.Provider>
       )
 
-      for (const hook of this.plugin.hooks) {
+      for (const hook of hooks) {
         if (hook.transform) {
           app = hook.transform(app)
         }
       }
 
       if (this.options.mode == 'streaming') {
-        await render.reply.send(this.renderStreamingTemplate(app, bus, ReactDOMServer, render))
+        await render.reply.send(this.renderStreamingTemplate(app, bus, ReactDOMServer, render, hooks))
       } else {
-        await render.reply.send(this.renderSynchronousTemplate(app, bus, ReactDOMServer, render))
+        await render.reply.send(this.renderSynchronousTemplate(app, bus, ReactDOMServer, render, hooks))
       }
     } catch (error: unknown) {
       this.devServer?.ssrFixStacktrace(error as Error)
@@ -203,14 +205,20 @@ export class ReactRenderer implements Renderer {
     return bus
   }
 
-  private renderStreamingTemplate<Props>(app: JSX.Element, bus: RenderBus, ReactDOMServer: any, render: Render<Props>) {
-    this.runHeadHooks(bus)
+  private renderStreamingTemplate<Props>(
+    app: JSX.Element,
+    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)
+      this.runTailHooks(bus, hooks)
     })
 
     return render.document({
@@ -225,12 +233,13 @@ export class ReactRenderer implements Renderer {
     app: JSX.Element,
     bus: RenderBus,
     ReactDOMServer: any,
-    render: Render<Props>
+    render: Render<Props>,
+    hooks: FastifyRendererHook[]
   ) {
-    this.runHeadHooks(bus)
+    this.runHeadHooks(bus, hooks)
     const content = ReactDOMServer.renderToString(app)
-    this.runPostRenderHeadHooks(bus)
-    this.runTailHooks(bus)
+    this.runPostRenderHeadHooks(bus, hooks)
+    this.runTailHooks(bus, hooks)
 
     return render.document({
       content,
@@ -240,28 +249,28 @@ export class ReactRenderer implements Renderer {
     })
   }
 
-  private runPostRenderHeadHooks(bus: RenderBus) {
+  private runPostRenderHeadHooks(bus: RenderBus, hooks: FastifyRendererHook[]) {
     // Run any heads hooks that might want to push something after the content
-    for (const hook of this.plugin.hooks) {
+    for (const hook of hooks) {
       if (hook.postRenderHeads) {
         bus.push('head', hook.postRenderHeads())
       }
     }
     bus.push('head', null)
   }
 
-  private runHeadHooks(bus: RenderBus) {
+  private runHeadHooks(bus: RenderBus, hooks: FastifyRendererHook[]) {
     // Run any heads hooks that might want to push something before the content
-    for (const hook of this.plugin.hooks) {
+    for (const hook of hooks) {
       if (hook.heads) {
         bus.push('head', hook.heads())
       }
     }
   }
 
-  private runTailHooks(bus: RenderBus) {
+  private runTailHooks(bus: RenderBus, hooks: FastifyRendererHook[]) {
     // when we're done rendering the content, run any hooks that might want to push more stuff after the content
-    for (const hook of this.plugin.hooks) {
+    for (const hook of hooks) {
       if (hook.tails) {
         bus.push('tail', hook.tails())
       }

packages/fastify-renderer/test/renderers/ReactRenderer.spec.ts

@@ -52,18 +52,6 @@ describe('ReactRenderer', () => {
     test('should call postRenderHooks after dom render', async () => {
       const renderer = newReactRenderer()
       const callOrder: string[] = []
-      renderer.plugin.hooks = [
-        {
-          heads: () => {
-            callOrder.push('heads')
-            return 'heads'
-          },
-          postRenderHeads: () => {
-            callOrder.push('postRenderHeads')
-            return 'postRenderHeads'
-          },
-        },
-      ]
 
       renderer['renderSynchronousTemplate'](
         React.createElement(testLayoutComponent, {}),
@@ -74,7 +62,19 @@ describe('ReactRenderer', () => {
             return 'test'
           },
         },
-        getMockRender({})
+        getMockRender({}),
+        [
+          {
+            heads: () => {
+              callOrder.push('heads')
+              return 'heads'
+            },
+            postRenderHeads: () => {
+              callOrder.push('postRenderHeads')
+              return 'postRenderHeads'
+            },
+          },
+        ]
       )
 
       expect(callOrder).toEqual(['heads', 'render', 'postRenderHeads'])

packages/fastify-renderer/test/routes.spec.ts

@@ -1,9 +1,12 @@
 import path from 'path'
 import FastifyRenderer from '../src/node'
+import { unthunk } from '../src/node/utils'
 import { newFastify } from './helpers'
 
 const testComponent = require.resolve(path.join(__dirname, 'fixtures', 'test-module.tsx'))
 const testLayoutComponent = require.resolve(path.join(__dirname, 'fixtures', 'test-layout.tsx'))
+let thunkId = 0
+
 const options = {
   vite: { root: __dirname, logLevel: (process.env.LOG_LEVEL ?? 'info') as any },
   devMode: true,
@@ -23,6 +26,21 @@ const options = {
         return 'postRenderHead'
       },
     },
+    () => {
+      const id = thunkId++
+
+      return {
+        heads: () => {
+          return `<style>#${id} {}</style>`
+        },
+        transform: (app) => {
+          return app
+        },
+        postRenderHeads: () => {
+          return ''
+        },
+      }
+    },
   ],
 }
 
@@ -55,6 +73,10 @@ describe('FastifyRenderer', () => {
     await server.ready()
   })
 
+  beforeEach(() => {
+    thunkId = 0
+  })
+
   test('should return the route props if content-type is application/json', async () => {
     const response = await server.inject({
       method: 'GET',
@@ -96,15 +118,16 @@ describe('FastifyRenderer', () => {
 
   test('should call hooks in correct order', async () => {
     const callOrder: string[] = []
-    jest.spyOn(options.hooks[0], 'heads').mockImplementation(() => {
+    const hook = unthunk(options.hooks[0])
+    jest.spyOn(hook, 'heads').mockImplementation(() => {
       callOrder.push('heads')
       return 'head'
     })
-    jest.spyOn(options.hooks[0], 'transform').mockImplementation((app) => {
+    jest.spyOn(hook, 'transform').mockImplementation((app) => {
       callOrder.push('transforms')
       return app
     })
-    jest.spyOn(options.hooks[0], 'postRenderHeads').mockImplementation(() => {
+    jest.spyOn(hook, 'postRenderHeads').mockImplementation(() => {
       callOrder.push('postRenders')
       return 'postRender'
     })
@@ -117,4 +140,21 @@ describe('FastifyRenderer', () => {
 
     expect(callOrder).toEqual(['transforms', 'heads', 'postRenders'])
   })
+
+  test('should unthunk hooks on every render', async () => {
+    const firstResponse = await server.inject({
+      method: 'GET',
+      url: '/render-test',
+      headers: { Accept: 'text/html' },
+    })
+
+    const secondResponse = await server.inject({
+      method: 'GET',
+      url: '/render-test',
+      headers: { Accept: 'text/html' },
+    })
+
+    expect(firstResponse.body).toMatch('<style>#0 {}</style>')
+    expect(secondResponse.body).toMatch('<style>#1 {}</style>')
+  })
 })