From 10caf4997b28ff0f9bfaa9941247b97d29058bef Mon Sep 17 00:00:00 2001
From: Alexander Karan <47707063+AlexanderKaran@users.noreply.github.com>
Date: Thu, 23 Jul 2026 18:47:08 +0800
Subject: [PATCH 1/2] Change CSR Set Up

---
 .../src/routes/client-side-rendered/+page.svelte  |  9 ++-------
 .../src/routes/client-side-rendered/+page.ts      | 15 +++++++++++++++
 .../routes/client-side-rendered/[id]/+page.svelte |  6 ++----
 .../src/routes/client-side-rendered/[id]/+page.ts |  6 ++++++
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/app-sveltekit/src/routes/client-side-rendered/+page.svelte b/packages/app-sveltekit/src/routes/client-side-rendered/+page.svelte
index 4e90d5ff..a1a566c7 100644
--- a/packages/app-sveltekit/src/routes/client-side-rendered/+page.svelte
+++ b/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>
diff --git a/packages/app-sveltekit/src/routes/client-side-rendered/+page.ts b/packages/app-sveltekit/src/routes/client-side-rendered/+page.ts
index 62ad4e4f..c66b16bf 100644
--- a/packages/app-sveltekit/src/routes/client-side-rendered/+page.ts
+++ b/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() }
+}
diff --git a/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.svelte b/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.svelte
index 39bab2d4..f446fc16 100644
--- a/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.svelte
+++ b/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/state'
-
-  const id = $derived(page.params.id)
+  let { data } = $props()
 </script>
 
-<p id="detail-id">{id}</p>
+<p id="detail-id">{data.id}</p>
diff --git a/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.ts b/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.ts
index 62ad4e4f..5f70dd65 100644
--- a/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.ts
+++ b/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.ts
@@ -1 +1,7 @@
+import type { PageLoad } from './$types'
+
 export const ssr = false
+
+export const load: PageLoad = ({ params }) => {
+  return { id: params.id }
+}

From 389bbee2e54aa5a8cefb7fd360f8d5b6bf662de4 Mon Sep 17 00:00:00 2001
From: Alexander Karan <47707063+AlexanderKaran@users.noreply.github.com>
Date: Thu, 23 Jul 2026 19:20:13 +0800
Subject: [PATCH 2/2] Fix

---
 .../src/routes/client-side-rendered/[id]/+page.svelte       | 6 ++++--
 .../src/routes/client-side-rendered/[id]/+page.ts           | 6 ------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.svelte b/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.svelte
index f446fc16..d283d2ba 100644
--- a/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.svelte
+++ b/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-  let { data } = $props()
+  import type { PageProps } from './$types'
+
+  let { params }: PageProps = $props()
 </script>
 
-<p id="detail-id">{data.id}</p>
+<p id="detail-id">{params.id}</p>
diff --git a/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.ts b/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.ts
index 5f70dd65..62ad4e4f 100644
--- a/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.ts
+++ b/packages/app-sveltekit/src/routes/client-side-rendered/[id]/+page.ts
@@ -1,7 +1 @@
-import type { PageLoad } from './$types'
-
 export const ssr = false
-
-export const load: PageLoad = ({ params }) => {
-  return { id: params.id }
-}