Change CSR Set Up

packages/app-sveltekit/src/routes/client-side-rendered/+page.svelte

@@ -1,15 +1,10 @@
 <script lang="ts">
-  type Entry = { id: string; name: string }
-
-  const entries: Entry[] = Array.from({ length: 1000 }, () => ({
-    id: crypto.randomUUID(),
-    name: crypto.randomUUID(),
-  }))
+  let { data } = $props()
 </script>
 
 <table>
   <tbody>
-    {#each entries as entry (entry.id)}
+    {#each data.entries as entry (entry.id)}
       <tr>
         <td>{entry.id}</td>
         <td>{entry.name}</td>

packages/app-sveltekit/src/routes/client-side-rendered/+page.ts

@@ -1 +1,16 @@
+import type { PageLoad } from './$types'
+
+type Entry = { id: string; name: string }
+
+function generateData(): Entry[] {
+  return Array.from({ length: 1000 }, () => ({
+    id: crypto.randomUUID(),
+    name: crypto.randomUUID(),
+  }))
+}
+
 export const ssr = false
+
+export const load: PageLoad = () => {
+  return { entries: generateData() }
+}

packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { page } from '$app/state'
+  import type { PageProps } from './$types'
 
-  const id = $derived(page.params.id)
+  let { params }: PageProps = $props()
 </script>
 
-<p id="detail-id">{id}</p>
+<p id="detail-id">{params.id}</p>