Move leaderboard fetching to server-side

- Create src/lib/api.ts with fetchLeaderboard function for server use
- Update page.tsx to async component that fetches data at build/request time
- Pass fetched data to ClientPage as initialAppData prop
- Remove client-side useEffect and state management from ClientPage
- Reduce client bundle size (4.07kb → 2.99kb)
- Improve security by keeping API credentials server-only

src/app/ClientPage.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import dynamic from 'next/dynamic';
 import { AppData } from '@/lib/types';
-import { defaultAppData } from '@/lib/defaultData';
 import { calculateStandingsData } from '@/lib/leaderboard';
 import RaceResultsTable from './components/RaceResultsTable';
 import DriverStandings from './components/DriverStandings';
@@ -11,40 +10,12 @@ import PointsKey from './components/PointsKey';
 
 const CumulativeChart = dynamic(() => import('./components/CumulativeChart'), { ssr: false });
 
-const API_BASE = process.env.NEXT_PUBLIC_API_BASE || '';
+interface ClientPageProps {
-const SERVER_ID = process.env.NEXT_PUBLIC_SERVER_ID || '';
+  initialAppData: AppData;
-const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || '';
-
-async function fetchLeaderboard(): Promise<AppData | null> {
-  try {
-    const res = await fetch(`${API_BASE}/server/${SERVER_ID}/leaderboard`, {
-      headers: {
-        "Access-Key": ACCESS_TOKEN
-      }
-    });
-    if (!res.ok) return null;
-    const data = await res.json();
-    // Treat empty leaderboard (no drivers) as null to fall back to defaults
-    if (!data || !data.drivers || data.drivers.length === 0) return null;
-    return data;
-  } catch (e) {
-    console.error("Failed to load leaderboard from API:", e);
-    return null;
-  }
 }
 
-export default function ClientPage() {
+export default function ClientPage({ initialAppData }: ClientPageProps) {
-  const [appData, setAppData] = useState<AppData>(defaultAppData);
+  const appData = initialAppData;
-
-  useEffect(() => {
-    const loadData = async () => {
-      const savedData = await fetchLeaderboard();
-      if (savedData) {
-        setAppData(savedData);
-      }
-    };
-    loadData();
-  }, []);
 
   const standingsData = useMemo(() => calculateStandingsData(appData), [appData]);
 

src/app/page.tsx

@@ -1,5 +1,10 @@
+import { fetchLeaderboard } from '@/lib/api';
+import { defaultAppData } from '@/lib/defaultData';
 import ClientPage from './ClientPage';
 
-export default function Page() {
+export default async function Page() {
-  return <ClientPage />;
+  const leaderboardData = await fetchLeaderboard();
+  const initialAppData = leaderboardData || defaultAppData;
+
+  return <ClientPage initialAppData={initialAppData} />;
 }

src/lib/api.ts

@@ -0,0 +1,28 @@
+import { AppData } from './types';
+
+export async function fetchLeaderboard(): Promise<AppData | null> {
+  const API_BASE = process.env.NEXT_PUBLIC_API_BASE || '';
+  const SERVER_ID = process.env.NEXT_PUBLIC_SERVER_ID || '';
+  const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || '';
+
+  if (!API_BASE || !SERVER_ID || !ACCESS_TOKEN) {
+    console.warn('Missing API configuration');
+    return null;
+  }
+
+  try {
+    const res = await fetch(`${API_BASE}/server/${SERVER_ID}/leaderboard`, {
+      headers: {
+        "Access-Key": ACCESS_TOKEN
+      }
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    // Treat empty leaderboard (no drivers) as null to fall back to defaults
+    if (!data || !data.drivers || data.drivers.length === 0) return null;
+    return data;
+  } catch (e) {
+    console.error("Failed to load leaderboard from API:", e);
+    return null;
+  }
+}