move headcontent to body

birkskyum · birkskyum · commit 509fa62060d5 · 2025-10-20T04:57:14.000+02:00
diff --git a/e2e/solid-start/basic-tsr-config/src/app/routes/__root.tsx b/e2e/solid-start/basic-tsr-config/src/app/routes/__root.tsx
@@ -29,10 +29,10 @@ function RootComponent() {
   return (
     <html>
       <head>
-        <HeadContent />
         <HydrationScript />
       </head>
       <body>
+        <HeadContent />
         <Outlet />
         <TanStackRouterDevtools position="bottom-right" />
         <Scripts />
diff --git a/e2e/solid-start/basic/src/routes/__root.tsx b/e2e/solid-start/basic/src/routes/__root.tsx
@@ -69,10 +69,10 @@ function RootComponent() {
   return (
     <html>
       <head>
-        <HeadContent />
         <HydrationScript />
       </head>
       <body>
+        <HeadContent />
         <div class="p-2 flex gap-2 text-lg">
           <Link
             to="/"
diff --git a/e2e/solid-start/custom-basepath/src/routes/__root.tsx b/e2e/solid-start/custom-basepath/src/routes/__root.tsx
@@ -57,10 +57,10 @@ function RootComponent() {
   return (
     <html>
       <head>
-        <HeadContent />
         <HydrationScript />
       </head>
       <body>
+        <HeadContent />
         <div class="p-2 flex gap-2 text-lg">
           <Link
             to="/"
diff --git a/e2e/solid-start/scroll-restoration/src/routes/__root.tsx b/e2e/solid-start/scroll-restoration/src/routes/__root.tsx
@@ -62,10 +62,10 @@ function RootComponent() {
   return (
     <html>
       <head>
-        <HeadContent />
         <HydrationScript />
       </head>
       <body>
+        <HeadContent />
         <Nav type="header" />
         <hr />
         <Outlet />
diff --git a/e2e/solid-start/selective-ssr/src/routes/__root.tsx b/e2e/solid-start/selective-ssr/src/routes/__root.tsx
@@ -125,10 +125,10 @@ function RootDocument({ children }: { children: Solid.JSX.Element }) {
   return (
     <html>
       <head>
-        <HeadContent />
         <HydrationScript />
       </head>
       <body>
+        <HeadContent />
         <div class="p-2 flex gap-2 text-lg">
           <h1>Selective SSR E2E Test</h1>
           <Link
diff --git a/e2e/solid-start/server-functions/src/routes/__root.tsx b/e2e/solid-start/server-functions/src/routes/__root.tsx
@@ -34,10 +34,10 @@ function RootComponent() {
   return (
     <html>
       <head>
-        <HeadContent />
         <HydrationScript />
       </head>
       <body>
+        <HeadContent />
         <Outlet />
         <TanStackRouterDevtools position="bottom-right" />
         <Scripts />
diff --git a/e2e/solid-start/server-routes/src/routes/__root.tsx b/e2e/solid-start/server-routes/src/routes/__root.tsx
@@ -34,10 +34,10 @@ function RootComponent() {
   return (
     <html>
       <head>
-        <HeadContent />
         <HydrationScript />
       </head>
       <body>
+        <HeadContent />
         <Outlet />
         <TanStackRouterDevtools position="bottom-right" />
         <Scripts />
diff --git a/e2e/solid-start/spa-mode/src/routes/__root.tsx b/e2e/solid-start/spa-mode/src/routes/__root.tsx
@@ -71,10 +71,10 @@ function RootDocument({ children }: { children: Solid.JSX.Element }) {
   return (
     <html>
       <head>
-        <HeadContent />
         <HydrationScript />
       </head>
       <body>
+        <HeadContent />
         <div class="p-2 flex gap-2 text-lg">
           <h1>SPA Mode E2E Test</h1>
           <Link
diff --git a/e2e/solid-start/website/src/routes/__root.tsx b/e2e/solid-start/website/src/routes/__root.tsx
@@ -60,10 +60,10 @@ function RootComponent() {
   return (
     <html>
       <head>
-        <HeadContent />
         <HydrationScript />
       </head>
       <body>
+        <HeadContent />
         <Outlet />
         <TanStackRouterDevtools position="bottom-right" />
         <Scripts />
diff --git a/packages/solid-router/src/HeadContent.tsx b/packages/solid-router/src/HeadContent.tsx
@@ -182,7 +182,9 @@ export const useTags = () => {
 
 /**
  * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
- * It should be rendered in the `<head>` of your document.
+ * When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`
+ * to ensure it's part of the reactive tree and updates correctly during client-side navigation.
+ * The component uses portals internally to render content into the `<head>` element.
  */
 export function HeadContent() {
   const tags = useTags()
