Improve prerendering

Author: hhvrc

src/routes/(anonymous)/+layout.ts

@@ -1,18 +1,5 @@
 <script lang="ts">
-  import { metaApi } from '$lib/api';
-  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
-  import { onMount } from 'svelte';
-
-  let deviceCount = $state(0);
-
-  onMount(async () => {
-    try {
-      const { data } = await metaApi.publicGetOnlineDevicesStatistics();
-      deviceCount = data.devicesOnline;
-    } catch (err) {
-      handleApiError(err);
-    }
-  });
+  let { data } = $props();
 </script>
 
 <section class="flex flex-col items-center justify-center h-full text-white text-center space-y-6">
@@ -22,7 +9,9 @@
   </span>
   <p class="text-lg md:text-2xl opacity-75">
     The go-to platform for safe, reliable, real low-latency remote shocking.<br />
-    <span class="font-semibold">{deviceCount}</span> people online right now.
+    {#if data.ok}
+      <span class="font-semibold">{data.deviceCount}</span> people online right now.
+    {/if}
   </p>
   <div class="flex space-x-4 pt-8 text-sm opacity-75">
     <a href="https://openshock.org" target="_blank" rel="noopener" class="hover:underline">

src/routes/(anonymous)/+page.svelte

@@ -0,0 +1,27 @@
+import { metaApi } from '$lib/api';
+
+export const ssr = true;
+export const prerender = false;
+
+export async function load({ setHeaders }): Promise<{ ok: false, error: string } | { ok: true, deviceCount: number }> {
+  setHeaders({
+    'cache-control': 'public, max-age=300'
+  })
+
+  let deviceCount: number;
+
+  try {
+    const { data } = await metaApi.publicGetOnlineDevicesStatistics();
+
+    deviceCount = data.devicesOnline;
+  } catch (e) {
+    console.error(e);
+
+    return {
+      ok: false,
+      error: 'Failed to fetch device count',
+    };
+  }
+
+  return { ok: true, deviceCount };
+}

src/routes/(anonymous)/+page.ts

@@ -3,6 +3,8 @@ import { goto } from '$app/navigation';
 import { accountV1Api } from '$lib/api';
 import { destroyAuth } from '$lib/init';
 
+export const prerender = false;
+
 export async function load() {
   if (!browser) return; // Do not run the following on server
 

src/routes/(anonymous)/logout/+page.ts

@@ -1,3 +1 @@
-// Set the default for the application
-export const ssr = false; // Only this file and pages under it in browser
 export const prerender = true;