Merge pull request #34 from fastify/react-tweaks

fix(react): hydration order, streaming performance
fastify · Jul 1, 2022 · efddd02 · efddd02
2 parents 1f058e7 + 408ec75
commit efddd02
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 31 deletions.
diff --git a/packages/fastify-dx-react/index.js b/packages/fastify-dx-react/index.js
@@ -55,20 +55,9 @@ export function createHtmlFunction (source, scope, config) {
   const soFooterTemplate = createHtmlTemplateFunction(soFooterSource)
   // This function gets registered as reply.html()
   return function ({ routes, context, body }) {
-    // Initialize hydration, which can stay empty if context.serverOnly is true
-    let hydration = ''
     // Decide which templating functions to use, with and without hydration
     const headTemplate = context.serverOnly ? soHeadTemplate : unHeadTemplate
     const footerTemplate = context.serverOnly ? soFooterTemplate : unFooterTemplate
-    // Decide whether or not to include the hydration script
-    if (!context.serverOnly) {
-      hydration = (
-        '<script>\n' +
-        `window.route = ${devalue(context.toJSON())}\n` +
-        `window.routes = ${devalue(routes.toJSON())}\n` +
-        '</script>'
-      )
-    }
     // Render page-level <head> elements
     const head = new Head(context.head).render()
     // Create readable stream with prepended and appended chunks
@@ -78,8 +67,19 @@ export function createHtmlFunction (source, scope, config) {
           ? onShellReady(body)
           : onAllReady(body)
       ),
-      head: headTemplate({ ...context, head, hydration }),
-      footer: footerTemplate(context),
+      head: headTemplate({ ...context, head }),
+      footer: () => footerTemplate({
+        ...context,
+        // Decide whether or not to include the hydration script
+        ...!context.serverOnly && {
+          hydration: (
+            '<script>\n' +
+            `window.route = ${devalue(context.toJSON())}\n` +
+            `window.routes = ${devalue(routes.toJSON())}\n` +
+            '</script>'
+          )
+        },
+      }),
     }))
     // Send out header and readable stream with full response
     this.type('text/html')

diff --git a/packages/fastify-dx-react/package.json b/packages/fastify-dx-react/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "main": "index.js",
   "name": "fastify-dx-react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "files": [
     "virtual/create.jsx",
     "virtual/root.jsx",
@@ -27,10 +27,11 @@
     "./plugin": "./plugin.cjs"
   },
   "dependencies": {
+    "devalue": "^2.0.1",
+    "minipass": "^3.3.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
-    "devalue": "^2.0.1",
     "unihead": "^0.0.6",
     "valtio": "^1.6.1"
   },
@@ -45,4 +46,4 @@
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-react": "^7.29.4"
   }
-}
+}
diff --git a/packages/fastify-dx-react/server/stream.js b/packages/fastify-dx-react/server/stream.js
@@ -1,7 +1,7 @@
 
-// Helper from the Node.js stream library to
-// make it easier to work with renderToPipeableStream()
-import { PassThrough } from 'stream'
+// Helper to make the stream returned renderToPipeableStream()
+// behave like an event emitter and facilitate error handling in Fastify
+import Minipass from 'minipass'
 
 // React 18's preferred server-side rendering function,
 // which enables the combination of React.lazy() and Suspense
@@ -15,13 +15,13 @@ export async function * generateHtmlStream ({ head, body, footer }) {
       yield chunk
     }
   }
-  yield footer
+  yield footer()
 }
 
 // Helper function to get an AsyncIterable (via PassThrough)
 // from the renderToPipeableStream() onShellReady event
 export function onShellReady (app) {
-  const duplex = new PassThrough()
+  const duplex = new Minipass()
   return new Promise((resolve, reject) => {
     try {
       const pipeable = renderToPipeableStream(app, {
@@ -35,10 +35,10 @@ export function onShellReady (app) {
   })
 }
 
-// Helper function to get an AsyncIterable (via PassThrough)
+// Helper function to get an AsyncIterable (via Minipass)
 // from the renderToPipeableStream() onAllReady event
 export function onAllReady (app) {
-  const duplex = new PassThrough()
+  const duplex = new Minipass()
   return new Promise((resolve, reject) => {
     try {
       const pipeable = renderToPipeableStream(app, {

diff --git a/packages/fastify-dx-react/virtual/core.jsx b/packages/fastify-dx-react/virtual/core.jsx
@@ -6,15 +6,16 @@ import { proxy, useSnapshot } from 'valtio'
 import { waitResource, waitFetch } from '/dx:resource.js'
 import layouts from '/dx:layouts.js'
 
-const isServer = typeof process === 'object'
-
+export const isServer = import.meta.env.SSR
 export const Router = isServer ? StaticRouter : BrowserRouter
 export const RouteContext = createContext({})
 
 export function useRouteContext () {
   const routeContext = useContext(RouteContext)
   if (routeContext.state) {
-    routeContext.snapshot = useSnapshot(routeContext.state)
+    routeContext.snapshot = isServer
+      ? routeContext.state
+      : useSnapshot(routeContext.state)
   }
   return routeContext
 }
@@ -56,7 +57,9 @@ export function DXRoute ({ head, ctxHydration, ctx, children }) {
       <RouteContext.Provider value={{
         ...ctx,
         ...ctxHydration,
-        state: proxy(ctxHydration.state),
+        state: isServer
+          ? ctxHydration.state
+          : proxy(ctxHydration.state),
       }}>
         <Layout>
           {children}
@@ -130,7 +133,9 @@ export function DXRoute ({ head, ctxHydration, ctx, children }) {
     <RouteContext.Provider value={{
       ...ctxHydration,
       ...ctx,
-      state: proxy(ctxHydration.state),
+      state: isServer
+        ? ctxHydration.state
+        : proxy(ctxHydration.state),
     }}>
       <Layout>
         {children}

diff --git a/starters/react/client/index.html b/starters/react/client/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="./base.css">
     <!-- head -->
-    <!-- hydration -->
   </head>
   <body>
     <main><!-- element --></main>
   </body>
+  <!-- hydration -->
   <script type="module" src="/dx:mount.js"></script>
 </html>
diff --git a/starters/react/client/pages/index.jsx b/starters/react/client/pages/index.jsx
@@ -1,5 +1,6 @@
 import logo from '/assets/logo.svg'
 import { Link } from 'react-router-dom'
+import { isServer, useRouteContext } from '/dx:core.jsx'
 
 export function getMeta () {
   return {
@@ -8,10 +9,15 @@ export function getMeta () {
 }
 
 export default function Index () {
+  const { snapshot, state } = useRouteContext()
+  if (isServer) {
+    // State is automatically hydrated on the client
+    state.message = 'Welcome to Fastify DX for React!'
+  }
   return (
     <>
       <img src={logo} />
-      <h1>Welcome to Fastify DX for React!</h1>
+      <h1>{snapshot.message}</h1>
       <ul className="columns-2">
         <li><Link to="/using-data">/using-data</Link> demonstrates how to 
         leverage the <code>getData()</code> function 

diff --git a/starters/react/package.json b/starters/react/package.json
@@ -10,7 +10,7 @@
     "lint": "eslint . --ext .js,.jsx --fix"
   },
   "dependencies": {
-    "fastify-dx-react": "^0.0.2",
+    "fastify-dx-react": "^0.0.3",
     "fastify-vite": "^3.0.0-beta.23",
     "ky-universal": "^0.10.1"
   },