fixes

brenelz · brenelz · commit 69f4878c7dc0 · 2025-10-19T12:11:40.000-05:00
diff --git a/e2e/solid-start/basic/src/client.tsx b/e2e/solid-start/basic/src/client.tsx
@@ -7,4 +7,4 @@ console.log("[client-entry]: using custom client entry in 'src/client.tsx'")
 
 const router = await hydrateStart()
 
-hydrate(() => <StartClient router={router} />, document.body)
+hydrate(() => <StartClient router={router} />, document)
diff --git a/packages/solid-router/src/ClientOnly.tsx b/packages/solid-router/src/ClientOnly.tsx
@@ -1,9 +1,8 @@
 import * as Solid from 'solid-js'
-import { isServer } from 'solid-js/web'
 
 export interface ClientOnlyProps {
   /**
-   * The children to render if the JS is loaded.
+   * The children to render when the JS is loaded.
    */
   children: Solid.JSX.Element
   /**
@@ -30,9 +29,37 @@ export interface ClientOnlyProps {
  * ```
  */
 export function ClientOnly(props: ClientOnlyProps) {
+  const hydrated = useHydrated()
   return (
-    <Solid.Show when={!isServer} fallback={props.fallback}>
+    <Solid.Show when={hydrated()} fallback={props.fallback ?? null}>
       <>{props.children}</>
     </Solid.Show>
   )
 }
+
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * When doing Server-Side Rendering, the result will always be false.
+ * When doing Client-Side Rendering, the result will always be false on the
+ * first render and true from then on. Even if a new component renders it will
+ * always start with true.
+ *
+ * @example
+ * ```tsx
+ * // Disable a button that needs JS to work.
+ * const hydrated = useHydrated()
+ * return (
+ *   <button type="button" disabled={!hydrated()} onClick={doSomethingCustom}>
+ *     Click me
+ *   </button>
+ * )
+ * ```
+ * @returns True if the JS has been hydrated already, false otherwise.
+ */
+function useHydrated(): Solid.Accessor<boolean> {
+  const [hydrated, setHydrated] = Solid.createSignal(false)
+  Solid.onMount(() => {
+    setHydrated(true)
+  })
+  return hydrated
+}
diff --git a/packages/solid-router/src/Transitioner.tsx b/packages/solid-router/src/Transitioner.tsx
@@ -15,6 +15,10 @@ export function Transitioner() {
     select: ({ isLoading }) => isLoading,
   })
 
+  if (router.isServer) {
+    return null
+  }
+
   const [isTransitioning, setIsTransitioning] = Solid.createSignal(false)
   // Track pending state changes
   const hasPendingMatches = useRouterState({

Original file line number	Diff line number	Diff line change
`@@ -7,4 +7,4 @@ console.log("[client-entry]: using custom client entry in 'src/client.tsx'")`
`7`	`7`
`8`	`8`	`const router = await hydrateStart()`
`9`	`9`
`10`		`-hydrate(() => <StartClient router={router} />, document.body)`
	`10`	`+hydrate(() => <StartClient router={router} />, document)`