Merge pull request #310 from gadget-inc/ssr-styles-sync

Call renderToString before running head hooks so that ssr styles are generated

Author: airhorns

README.md

@@ -49,6 +49,7 @@ You can optionally provide configuration options to the plugin:
   - `heads` - Function that will return html tags to be appended to the document head tag
   - `tails` - Function that will return html tags to be appended to the document body tag
   - `transform` - Function that will be run to transform the root react element
+  - `postRenderHeads` - Function (called after render) that will return html tags to be appended to the document head tag. Useful when injecting styles that rely on rendering first.
 
 
 ## Setting up a route

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,9 +80,11 @@ 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)
+
       // 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(url))
         .default
@@ -96,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)
@@ -202,10 +205,21 @@ 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))
+    contentStream.on('end', () => {
+      this.runTailHooks(bus, hooks)
+    })
 
     return render.document({
       content: contentStream,
@@ -219,11 +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.runTailHooks(bus)
+    this.runPostRenderHeadHooks(bus, hooks)
+    this.runTailHooks(bus, hooks)
 
     return render.document({
       content,
@@ -233,19 +249,28 @@ export class ReactRenderer implements Renderer {
     })
   }
 
-  private runHeadHooks(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 hooks) {
+      if (hook.postRenderHeads) {
+        bus.push('head', hook.postRenderHeads())
+      }
+    }
+    bus.push('head', null)
+  }
+
+  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())
       }
     }
-    bus.push('head', null)
   }
 
-  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/src/node/types.ts

@@ -25,6 +25,7 @@ export interface FastifyRendererHook {
   tails?: () => string
   heads?: () => string
   transform?: (app: ReactElement) => ReactElement
+  postRenderHeads?: () => string
 }
 
 export interface ViteClientManifest {

packages/fastify-renderer/test/helpers.ts

@@ -1,9 +1,12 @@
 import fastify, { FastifyServerOptions } from 'fastify'
 import fastifyAccepts from 'fastify-accepts'
 import Middie from 'middie'
+import path from 'path'
+import { Readable } from 'stream'
 import { FastifyRendererOptions, FastifyRendererPlugin } from '../src/node/Plugin'
 import { RenderBus } from '../src/node/RenderBus'
 import { ReactRenderer, ReactRendererOptions } from '../src/node/renderers/react/ReactRenderer'
+import { Render } from '../src/node/renderers/Renderer'
 
 const logLevel = process.env.LOG_LEVEL || 'error'
 
@@ -26,3 +29,22 @@ export const newReactRenderer = (options?: ReactRendererOptions): ReactRenderer
   const plugin = newFastifyRendererPlugin({ renderer: options })
   return plugin.renderer as ReactRenderer
 }
+
+export const getMockRender = <T>(props: T): Render<T> => {
+  return {
+    props,
+    renderable: path.resolve(__dirname, 'fixtures', 'test-module.tsx'),
+    url: 'test-url',
+    layout: path.resolve(__dirname, 'fixtures', 'test-layout.tsx'),
+    base: '',
+    document: (data) => Readable.from(''),
+    request: {
+      url: 'test-url',
+    } as any,
+    reply: {
+      send: (payload: unknown) => {
+        throw new Error('Send is not implemented')
+      },
+    } as any,
+  }
+}

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

@@ -1,7 +1,10 @@
-// import { ReactRenderer } from "../../src/node/renderers/react/ReactRenderer";
+import path from 'path'
+import React from 'react'
 import { DefaultDocumentTemplate } from '../../src/node/DocumentTemplate'
 import { RenderableRoute } from '../../src/node/renderers/Renderer'
-import { newReactRenderer } from '../helpers'
+import { getMockRender, newReactRenderer, newRenderBus } from '../helpers'
+
+const testLayoutComponent = require.resolve(path.join(__dirname, '..', 'fixtures', 'test-layout.tsx'))
 
 describe('ReactRenderer', () => {
   test('should create an instance and initialize the client module path', async () => {
@@ -45,6 +48,37 @@ describe('ReactRenderer', () => {
     test.skip('should throw on rendering failure', async () => {
       return
     })
+
+    test('should call postRenderHooks after dom render', async () => {
+      const renderer = newReactRenderer()
+      const callOrder: string[] = []
+
+      renderer['renderSynchronousTemplate'](
+        React.createElement(testLayoutComponent, {}),
+        newRenderBus(),
+        {
+          renderToString: () => {
+            callOrder.push('render')
+            return 'test'
+          },
+        },
+        getMockRender({}),
+        [
+          {
+            heads: () => {
+              callOrder.push('heads')
+              return 'heads'
+            },
+            postRenderHeads: () => {
+              callOrder.push('postRenderHeads')
+              return 'postRenderHeads'
+            },
+          },
+        ]
+      )
+
+      expect(callOrder).toEqual(['heads', 'render', 'postRenderHeads'])
+    })
   })
 
   describe('buildVirtualClientEntrypointModuleID()', () => {

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

@@ -1,10 +1,48 @@
 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'))
-const options = { vite: { root: __dirname, logLevel: (process.env.LOG_LEVEL ?? 'info') as any } }
+let thunkId = 0
+
+const options = {
+  vite: { root: __dirname, logLevel: (process.env.LOG_LEVEL ?? 'info') as any },
+  devMode: true,
+  renderer: {
+    mode: 'sync' as const,
+    type: 'react' as const,
+  },
+  hooks: [
+    {
+      heads: () => {
+        return 'head'
+      },
+      transform: (app) => {
+        return app
+      },
+      postRenderHeads: () => {
+        return 'postRenderHead'
+      },
+    },
+    () => {
+      const id = thunkId++
+
+      return {
+        heads: () => {
+          return `<style>#${id} {}</style>`
+        },
+        transform: (app) => {
+          return app
+        },
+        postRenderHeads: () => {
+          return ''
+        },
+      }
+    },
+  ],
+}
 
 describe('FastifyRenderer', () => {
   let server
@@ -35,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',
@@ -73,4 +115,46 @@ describe('FastifyRenderer', () => {
     expect(response.statusCode).toEqual(201)
     expect(response.body).toEqual('hello')
   })
+
+  test('should call hooks in correct order', async () => {
+    const callOrder: string[] = []
+    const hook = unthunk(options.hooks[0])
+    jest.spyOn(hook, 'heads').mockImplementation(() => {
+      callOrder.push('heads')
+      return 'head'
+    })
+    jest.spyOn(hook, 'transform').mockImplementation((app) => {
+      callOrder.push('transforms')
+      return app
+    })
+    jest.spyOn(hook, 'postRenderHeads').mockImplementation(() => {
+      callOrder.push('postRenders')
+      return 'postRender'
+    })
+
+    await server.inject({
+      method: 'GET',
+      url: '/render-test',
+      headers: { Accept: 'text/html' },
+    })
+
+    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>')
+  })
 })