Fixed up solid start (#269)

Author: AlexanderKaran

packages/app-solid-start/src/components/ClientSideRenderedDetail.tsx

@@ -0,0 +1,7 @@
+import { useParams } from '@solidjs/router'
+
+export default function ClientSideRenderedDetail() {
+  const params = useParams()
+
+  return <p id="detail-id">{params.id}</p>
+}

packages/app-solid-start/src/components/ClientSideRenderedTable.tsx

@@ -0,0 +1,29 @@
+import { A } from '@solidjs/router'
+import { For } from 'solid-js'
+
+type Entry = { id: string; name: string }
+
+const entries: Entry[] = Array.from({ length: 1000 }, () => ({
+  id: crypto.randomUUID(),
+  name: crypto.randomUUID(),
+}))
+
+export default function ClientSideRenderedTable() {
+  return (
+    <table>
+      <tbody>
+        <For each={entries}>
+          {(entry) => (
+            <tr>
+              <td>{entry.id}</td>
+              <td>{entry.name}</td>
+              <td>
+                <A href={`/client-side-rendered/${entry.id}`}>View →</A>
+              </td>
+            </tr>
+          )}
+        </For>
+      </tbody>
+    </table>
+  )
+}

packages/app-solid-start/src/routes/client-side-rendered/[id].tsx

@@ -1,9 +1,9 @@
-import { useParams } from '@solidjs/router'
+import { clientOnly } from '@solidjs/start'
 
-export const ssr = false
+const ClientSideRenderedDetail = clientOnly(
+  () => import('../../components/ClientSideRenderedDetail'),
+)
 
 export default function ClientSideRenderedDetailPage() {
-  const params = useParams()
-
-  return <p id="detail-id">{params.id}</p>
+  return <ClientSideRenderedDetail />
 }

packages/app-solid-start/src/routes/client-side-rendered/index.tsx

@@ -1,31 +1,9 @@
-import { For } from 'solid-js'
-import { A } from '@solidjs/router'
+import { clientOnly } from '@solidjs/start'
 
-export const ssr = false
-
-type Entry = { id: string; name: string }
-
-const entries: Entry[] = Array.from({ length: 1000 }, () => ({
-  id: crypto.randomUUID(),
-  name: crypto.randomUUID(),
-}))
+const ClientSideRenderedTable = clientOnly(
+  () => import('../../components/ClientSideRenderedTable'),
+)
 
 export default function ClientSideRenderedPage() {
-  return (
-    <table>
-      <tbody>
-        <For each={entries}>
-          {(entry) => (
-            <tr>
-              <td>{entry.id}</td>
-              <td>{entry.name}</td>
-              <td>
-                <A href={`/client-side-rendered/${entry.id}`}>View →</A>
-              </td>
-            </tr>
-          )}
-        </For>
-      </tbody>
-    </table>
-  )
+  return <ClientSideRenderedTable />
 }

packages/app-solid-start/src/routes/index.tsx

@@ -8,7 +8,7 @@ const getData = query(async () => {
 }, 'test-data')
 
 export const route = {
-  load: () => getData(),
+  preload: () => getData(),
 }
 
 export default function Home() {

packages/app-solid-start/src/routes/server-side-rendered/index.tsx

@@ -8,7 +8,7 @@ const getData = query(async () => {
 }, 'server-side-rendered-data')
 
 export const route = {
-  load: () => getData(),
+  preload: () => getData(),
 }
 
 export default function ServerSideRenderedPage() {