Skip to content

PoC(solid-router): full-document hydration #6318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
birkskyum wants to merge 5 commits into
base: main
Choose a base branch
from
+917 −798
Draft

PoC(solid-router): full-document hydration #6318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
527cb94
solid-router-withtout-meta
birkskyum Jan 5, 2026
5eeace4
solid-router-without-meta-and-head-hydration
birkskyum Jan 6, 2026
7d96356
make head-only (remove portal)
birkskyum Jan 6, 2026
8d96f5d
portal to head
birkskyum Jan 6, 2026
629c4d5
move HydrationScript into HeadContent
birkskyum Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/router/framework/solid/guide/ssr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { createRouter } from './router'

const router = createRouter()

hydrate(() => <RouterClient router={router} />, document.body)
hydrate(() => <RouterClient router={router} />, document)
Copy link
Contributor

@brenelz brenelz Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

didn't we have a hydrateStart function or did that change?

```

[//]: # 'ClientEntryFileExample'
2 changes: 1 addition & 1 deletion docs/start/framework/solid/build-from-scratch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,9 +196,9 @@ function RootDocument({ children }: Readonly<{ children: Solid.JSX.Element }>) {
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<Solid.Suspense>{children}</Solid.Suspense>
<Scripts />
</body>
Expand Down
14 changes: 9 additions & 5 deletions docs/start/framework/solid/guide/routing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,11 +105,15 @@ function RootComponent() {

function RootDocument({ children }: Readonly<{ children: Solid.JSX.Element }>) {
return (
<>
<HeadContent />
{children}
<Scripts />
</>
<html>
<head>
<HeadContent />
</head>
<body>
{children}
<Scripts />
</body>
</html>
)
}
```
Expand Down
12 changes: 9 additions & 3 deletions docs/start/framework/solid/guide/selective-ssr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,9 +205,15 @@ export const Route = createRootRoute({

function RootShell(props) {
return (
<HeadContent />
{props.children}
<Scripts />
<html>
<head>
<HeadContent />
</head>
<body>
{props.children}
<Scripts />
</body>
</html>
)
}

Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/basic-auth/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { createServerFn } from '@tanstack/solid-start'

import type * as Solid from 'solid-js'
import { HydrationScript } from 'solid-js/web'
import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary.js'
import { NotFound } from '~/components/NotFound.js'
import appCss from '~/styles/app.css?url'
Expand Down Expand Up @@ -101,10 +100,9 @@ function RootDocument({ children }: { children: Solid.JSX.Element }) {
return (
<html>
<head>
<HydrationScript />
Copy link
Contributor

@brenelz brenelz Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't we still need the HydrationScript?

<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/basic-cloudflare/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import type * as Solid from 'solid-js'
import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
import { NotFound } from '~/components/NotFound'
Expand Down Expand Up @@ -61,10 +60,9 @@ function RootDocument({ children }: { children: Solid.JSX.Element }) {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/basic-solid-query/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
createRootRouteWithContext,
} from '@tanstack/solid-router'
import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import type { QueryClient } from '@tanstack/solid-query'
import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
import { NotFound } from '~/components/NotFound'
Expand Down Expand Up @@ -78,10 +77,9 @@ function RootDocument(props: { children?: any }) {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/basic-tsr-config/src/app/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'

export const Route = createRootRoute({
head: () => ({
Expand All @@ -29,10 +28,9 @@ function RootComponent() {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<Outlet />
<TanStackRouterDevtools position="bottom-right" />
<Scripts />
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/basic/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
} from '@tanstack/solid-router'

import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import { NotFound } from '~/components/NotFound'
import appCss from '~/styles/app.css?url'
import { seo } from '~/utils/seo'
Expand Down Expand Up @@ -69,10 +68,9 @@ function RootComponent() {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/custom-basepath/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
} from '@tanstack/solid-router'

import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import { NotFound } from '~/components/NotFound'
import appCss from '~/styles/app.css?url'
import { seo } from '~/utils/seo'
Expand Down Expand Up @@ -57,10 +56,9 @@ function RootComponent() {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/query-integration/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
createRootRouteWithContext,
} from '@tanstack/solid-router'
import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import type { QueryClient } from '@tanstack/solid-query'
import appCss from '~/styles/app.css?url'

Expand All @@ -28,10 +27,9 @@ function RootDocument(props: { children?: any }) {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
Expand Down
5 changes: 2 additions & 3 deletions e2e/solid-start/scroll-restoration/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
createRootRoute,
linkOptions,
} from '@tanstack/solid-router'
import { Dynamic, HydrationScript } from 'solid-js/web'
import { Dynamic } from 'solid-js/web'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { NotFound } from '~/components/NotFound'
import appCss from '~/styles/app.css?url'
Expand Down Expand Up @@ -62,10 +62,9 @@ function RootComponent() {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<Nav type="header" />
<hr />
<Outlet />
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/selective-ssr/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
useRouterState,
} from '@tanstack/solid-router'
import { z } from 'zod'
import { HydrationScript } from 'solid-js/web'
import type * as Solid from 'solid-js'
import { ssrSchema } from '~/search'
import appCss from '~/styles/app.css?url'
Expand Down Expand Up @@ -118,10 +117,9 @@ function RootDocument({ children }: { children: Solid.JSX.Element }) {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<h1>Selective SSR E2E Test</h1>
<Link
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/serialization-adapters/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
useRouterState,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import type { JSX } from 'solid-js'
import appCss from '~/styles/app.css?url'

Expand Down Expand Up @@ -39,10 +38,9 @@ function RootDocument({ children }: { children: JSX.Element }) {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<h1>Serialization Adapters E2E Test</h1>
<Link
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/server-functions/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
} from '@tanstack/solid-router'

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import { NotFound } from '~/components/NotFound'
import appCss from '~/styles/app.css?url'

Expand Down Expand Up @@ -34,10 +33,9 @@ function RootComponent() {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<Outlet />
<TanStackRouterDevtools position="bottom-right" />
<Scripts />
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/server-routes/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
} from '@tanstack/solid-router'

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import { NotFound } from '~/components/NotFound'
import appCss from '~/styles/app.css?url'

Expand Down Expand Up @@ -34,10 +33,9 @@ function RootComponent() {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<Outlet />
<TanStackRouterDevtools position="bottom-right" />
<Scripts />
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/spa-mode/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
useRouterState,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import type * as Solid from 'solid-js'
import appCss from '~/styles/app.css?url'

Expand Down Expand Up @@ -71,10 +70,9 @@ function RootDocument({ children }: { children: Solid.JSX.Element }) {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<h1>SPA Mode E2E Test</h1>
<Link
Expand Down
4 changes: 1 addition & 3 deletions e2e/solid-start/website/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import { NotFound } from '~/components/NotFound'
import appCss from '~/styles/app.css?url'
import { seo } from '~/utils/seo'
Expand Down Expand Up @@ -60,10 +59,9 @@ function RootComponent() {
return (
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<Outlet />
<TanStackRouterDevtools position="bottom-right" />
<Scripts />
Expand Down
2 changes: 1 addition & 1 deletion examples/solid/basic-ssr-file-based/src/entry-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ import { createRouter } from './router'

const router = createRouter()

hydrate(() => <RouterClient router={router} />, document.body)
hydrate(() => <RouterClient router={router} />, document)
2 changes: 1 addition & 1 deletion examples/solid/basic-ssr-streaming-file-based/src/entry-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ import { createRouter } from './router'

const router = createRouter()

hydrate(() => <RouterClient router={router} />, document.body)
hydrate(() => <RouterClient router={router} />, document)
2 changes: 1 addition & 1 deletion examples/solid/start-basic-auth/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,9 @@ function RootDocument({ children }: { children: Solid.JSX.Element }) {
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
Expand Down
2 changes: 1 addition & 1 deletion examples/solid/start-basic-authjs/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@ function RootDocument({ children }: { children: JSX.Element }) {
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<NavBar />
<main class="p-4">{children}</main>
<TanStackRouterDevtools position="bottom-right" />
Expand Down
2 changes: 1 addition & 1 deletion examples/solid/start-basic-cloudflare/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,9 @@ function RootDocument({ children }: { children: Solid.JSX.Element }) {
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
Expand Down
2 changes: 1 addition & 1 deletion examples/solid/start-basic-netlify/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,9 @@ function RootDocument({ children }: { children: Solid.JSX.Element }) {
<html>
<head>
<HydrationScript />
<HeadContent />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
Expand Down
Loading
Loading