Handle data loading during SSR

front/src/lib/stores/scoreStore.ts

@@ -26,9 +26,8 @@ function createStore(){
             });
         },
 
-        loadData: async () => {
-            if(scores.length !== 0) return;
-            let res = sort(await getLeaderboard());
+        load:  (data : Score[]) => {
+            let res = sort(data);
             set(res);
         },
     };

front/src/routes/+page.server.ts

@@ -0,0 +1,10 @@
+const api_url = import.meta.env.VITE_SERVER_API_URL
+
+// @ts-ignore
+export const load = async ( {fetch} ) => {
+
+    const res = await fetch(`${api_url}/leaderboard`)
+    const leaderboard = await res.json()
+
+    return { leaderboard };
+}

front/src/routes/+page.svelte

@@ -1,11 +1,13 @@
 <script>
-    import { onMount } from 'svelte';
-    import { scoreStore } from "$lib/stores/scoreStore.ts";
     import LeaderBoard from "$lib/components/LeaderBoard.svelte";
+    import {scoreStore} from "$lib/stores/scoreStore.ts";
+    import {onMount} from "svelte";
+
+    let { data } = $props()
 
     onMount(async () => {
-        await scoreStore.loadData();
-    });
+        scoreStore.load(data.leaderboard)
+    } )
 
 </script>
 

front/src/routes/play/+page.svelte

@@ -98,11 +98,12 @@
 
     button
     {
+        background-color: #f1ecec;
+
         color: black;
         width: 18vw;
         height: 15vh;
         border-radius: 10px;
-        background-color: #f1ecec;
         border: 2px solid #A1674A;
         box-shadow: 0 0 10px #343232;
     }