feat(react): ensure state can be modified in SSR phase

fastify · Jun 30, 2022 · fdc6a10 · fdc6a10
1 parent 95603f0
commit fdc6a10
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/fastify-dx-react/index.js b/packages/fastify-dx-react/index.js
@@ -67,7 +67,7 @@ export function createHtmlFunction (source, scope, config) {
           ? onShellReady(body)
           : onAllReady(body)
       ),
-      head: headTemplate({ ...context, head, hydration }),
+      head: headTemplate({ ...context, head }),
       footer: () => footerTemplate({
         ...context,
         // Decide whether or not to include the hydration script

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}