Skip to content

Solid hydration #5518

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

Merged
merged 19 commits into from
Oct 20, 2025
Merged

Solid hydration #5518

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
77661ce
solid hydration
brenelz Oct 17, 2025
3335060
debugging
brenelz Oct 17, 2025
9a6e548
still working
brenelz Oct 17, 2025
78de124
it works
brenelz Oct 19, 2025
d5b6e96
Cleanup
brenelz Oct 19, 2025
326993a
Merge branch 'main' into solid-hydration
brenelz Oct 19, 2025
7c54729
update __root files
brenelz Oct 19, 2025
69f4878
fixes
brenelz Oct 19, 2025
7c2df63
revert dep change
schiller-manuel Oct 19, 2025
5354deb
Merge branch 'main' into solid-hydration
schiller-manuel Oct 19, 2025
2aed1d8
work on hydration
birkskyum Oct 20, 2025
de21f0b
add doctype
birkskyum Oct 20, 2025
509fa62
move headcontent to body
birkskyum Oct 20, 2025
32c660f
move headcontent to body so it's hydrated
birkskyum Oct 20, 2025
fe41bed
Fix stream test
brenelz Oct 20, 2025
489bfde
add doctype to stream
brenelz Oct 20, 2025
0968563
await componentsPromise
birkskyum Oct 20, 2025
fe255da
make more targetted loading
birkskyum Oct 20, 2025
bbce1fb
Test: signed commit
birkskyum Oct 20, 2025
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
24 changes: 18 additions & 6 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
@@ -1,6 +1,11 @@
import * as Solid from 'solid-js'
import { Outlet, createRootRoute } from '@tanstack/solid-router'
import {
HeadContent,
Outlet,
Scripts,
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 @@ -22,9 +27,16 @@ export const Route = createRootRoute({

function RootComponent() {
return (
<>
<Outlet />
<TanStackRouterDevtools position="bottom-right" />
</>
<html>
<head>
<HydrationScript />
</head>
<body>
<HeadContent />
<Outlet />
<TanStackRouterDevtools position="bottom-right" />
<Scripts />
</body>
</html>
)
}
6 changes: 4 additions & 2 deletions e2e/solid-start/basic/src/client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
// DO NOT DELETE THIS FILE!!!
// This file is a good smoke test to make sure the custom client entry is working
import { hydrate } from 'solid-js/web'
import { StartClient } from '@tanstack/solid-start/client'
import { StartClient, hydrateStart } from '@tanstack/solid-start/client'

console.log("[client-entry]: using custom client entry in 'src/client.tsx'")

hydrate(() => <StartClient />, document.body)
hydrateStart().then((router) => {
hydrate(() => <StartClient router={router} />, document)
})
178 changes: 96 additions & 82 deletions e2e/solid-start/basic/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
/// <reference types="vite/client" />
import { Link, Outlet, createRootRoute } from '@tanstack/solid-router'
import {
HeadContent,
Link,
Outlet,
Scripts,
createRootRoute,
} 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 @@ -60,86 +67,93 @@ export const Route = createRootRoute({

function RootComponent() {
return (
<>
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
activeProps={{
class: 'font-bold',
}}
activeOptions={{ exact: true }}
>
Home
</Link>{' '}
<Link
to="/posts"
activeProps={{
class: 'font-bold',
}}
>
Posts
</Link>{' '}
<Link
to="/users"
activeProps={{
class: 'font-bold',
}}
>
Users
</Link>{' '}
<Link
to="/layout-a"
activeProps={{
class: 'font-bold',
}}
>
Layout
</Link>{' '}
<Link
to="/scripts"
activeProps={{
class: 'font-bold',
}}
>
Scripts
</Link>{' '}
<Link
to="/inline-scripts"
activeProps={{
class: 'font-bold',
}}
>
Inline Scripts
</Link>{' '}
<Link
to="/deferred"
activeProps={{
class: 'font-bold',
}}
>
Deferred
</Link>{' '}
<Link
to="/redirect"
activeProps={{
class: 'font-bold',
}}
>
redirect
</Link>{' '}
<Link
// @ts-expect-error
to="/this-route-does-not-exist"
activeProps={{
class: 'font-bold',
}}
>
This Route Does Not Exist
</Link>
</div>
<Outlet />
<div class="inline-div">This is an inline styled div</div>
<TanStackRouterDevtoolsInProd />
</>
<html>
<head>
<HydrationScript />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
activeProps={{
class: 'font-bold',
}}
activeOptions={{ exact: true }}
>
Home
</Link>{' '}
<Link
to="/posts"
activeProps={{
class: 'font-bold',
}}
>
Posts
</Link>{' '}
<Link
to="/users"
activeProps={{
class: 'font-bold',
}}
>
Users
</Link>{' '}
<Link
to="/layout-a"
activeProps={{
class: 'font-bold',
}}
>
Layout
</Link>{' '}
<Link
to="/scripts"
activeProps={{
class: 'font-bold',
}}
>
Scripts
</Link>{' '}
<Link
to="/inline-scripts"
activeProps={{
class: 'font-bold',
}}
>
Inline Scripts
</Link>{' '}
<Link
to="/deferred"
activeProps={{
class: 'font-bold',
}}
>
Deferred
</Link>{' '}
<Link
to="/redirect"
activeProps={{
class: 'font-bold',
}}
>
redirect
</Link>{' '}
<Link
// @ts-expect-error
to="/this-route-does-not-exist"
activeProps={{
class: 'font-bold',
}}
>
This Route Does Not Exist
</Link>
</div>
<Outlet />
<div class="inline-div">This is an inline styled div</div>
<TanStackRouterDevtoolsInProd />
<Scripts />
</body>
</html>
)
}
6 changes: 3 additions & 3 deletions e2e/solid-start/basic/src/routes/stream.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Await, createFileRoute } from '@tanstack/solid-router'
import { createEffect, createSignal } from 'solid-js'
import { createEffect, createSignal, Suspense } from 'solid-js'

export const Route = createFileRoute('/stream')({
component: Home,
Expand Down Expand Up @@ -45,7 +45,7 @@ function Home() {
})

return (
<>
<Suspense>
<Await
promise={loaderData().promise}
children={(promiseData) => (
Expand All @@ -59,6 +59,6 @@ function Home() {
</div>
)}
/>
</>
</Suspense>
)
}
112 changes: 63 additions & 49 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
@@ -1,6 +1,13 @@
import { Link, Outlet, createRootRoute } from '@tanstack/solid-router'
import {
HeadContent,
Link,
Outlet,
Scripts,
createRootRoute,
} 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 @@ -48,53 +55,60 @@ export const Route = createRootRoute({

function RootComponent() {
return (
<>
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
activeProps={{
class: 'font-bold',
}}
activeOptions={{ exact: true }}
>
Home
</Link>{' '}
<Link
to="/posts"
activeProps={{
class: 'font-bold',
}}
>
Posts
</Link>{' '}
<Link
to="/users"
activeProps={{
class: 'font-bold',
}}
>
Users
</Link>{' '}
<Link
to="/deferred"
activeProps={{
class: 'font-bold',
}}
>
Deferred
</Link>{' '}
<Link
// @ts-expect-error
to="/this-route-does-not-exist"
activeProps={{
class: 'font-bold',
}}
>
This Route Does Not Exist
</Link>
</div>
<Outlet />
<TanStackRouterDevtoolsInProd />
</>
<html>
<head>
<HydrationScript />
</head>
<body>
<HeadContent />
<div class="p-2 flex gap-2 text-lg">
<Link
to="/"
activeProps={{
class: 'font-bold',
}}
activeOptions={{ exact: true }}
>
Home
</Link>{' '}
<Link
to="/posts"
activeProps={{
class: 'font-bold',
}}
>
Posts
</Link>{' '}
<Link
to="/users"
activeProps={{
class: 'font-bold',
}}
>
Users
</Link>{' '}
<Link
to="/deferred"
activeProps={{
class: 'font-bold',
}}
>
Deferred
</Link>{' '}
<Link
// @ts-expect-error
to="/this-route-does-not-exist"
activeProps={{
class: 'font-bold',
}}
>
This Route Does Not Exist
</Link>
</div>
<Outlet />
<TanStackRouterDevtoolsInProd />
<Scripts />
</body>
</html>
)
}
Loading
Loading