fix(react): update unhead context on initial <Head> render (#534)

Narixius · web-flow · commit 24ee39294e10 · 2025-03-29T10:43:15.000+11:00
* fix(react): Ensure `&lt;Head&gt;` updates context immediately for SSR compatibility

* fix(react): update unhead context on initial render in &lt;Head&gt; component

By leverating useRef initial value
diff --git a/packages/react/src/components.ts b/packages/react/src/components.ts
@@ -9,22 +9,10 @@ interface HeadProps {
   titleTemplate?: string
 }
 
-const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined'
-
 const Head: React.FC<HeadProps> = ({ children, titleTemplate }) => {
-  const headRef = useRef<ActiveHeadEntry<any> | null>(null)
   const head = useUnhead()
 
-  useEffect(() => {
-    return () => {
-      if (headRef.current?.dispose()) {
-        headRef.current.dispose()
-      }
-      headRef.current = null
-    }
-  }, [])
-
-  const applyHeadChanges = useCallback(() => {
+  const getHeadChanges = useCallback(() => {
     const input: UseHeadInput = {
       titleTemplate,
     }
@@ -51,20 +39,25 @@ const Head: React.FC<HeadProps> = ({ children, titleTemplate }) => {
         input[type] = data
       }
     })
-
-    if (!headRef.current) {
-      headRef.current = head.push(input)
-    }
-    else {
-      headRef.current.patch(input)
-    }
+    return input
   }, [children, titleTemplate])
 
-  useEffect(applyHeadChanges, [applyHeadChanges])
+  const headRef = useRef<ActiveHeadEntry<any> | null>(
+    head.push(getHeadChanges()),
+  )
+
+  useEffect(() => {
+    return () => {
+      if (headRef.current?.dispose) {
+        headRef.current.dispose()
+      }
+      headRef.current = null
+    }
+  }, [])
 
-  // in ssr, apply changes immediately
-  if (!isBrowser)
-    applyHeadChanges()
+  useEffect(() => {
+    headRef.current?.patch(getHeadChanges())
+  }, [getHeadChanges])
 
   return null
 }
