move fetch to useEffect

src/app/page.tsx

@@ -1,12 +1,18 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { fetchLeaderboard } from "@/lib/api";
 import { defaultAppData } from "@/lib/defaultData";
 import ClientPage from "./ClientPage";
 
-export default async function Page() {
+export default function Page() {
-  const leaderboardData = await fetchLeaderboard();
+  const [appData, setAppData] = useState(defaultAppData);
-  const initialAppData = leaderboardData || defaultAppData;
 
-  return <ClientPage initialAppData={initialAppData} />;
+  useEffect(() => {
+    fetchLeaderboard().then((data) => {
+      setAppData(data || defaultAppData);
+    });
+  }, []);
+
+  return <ClientPage initialAppData={appData} />;
 }

src/lib/api.ts

@@ -2,8 +2,8 @@ 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.SERVER_ID || '';
+  const SERVER_ID = process.env.NEXT_PUBLIC_SERVER_ID || '';
-  const ACCESS_TOKEN = process.env.ACCESS_TOKEN || '';
+  const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || '';
 
   if (!API_BASE || !SERVER_ID || !ACCESS_TOKEN) {
     console.warn('Missing API configuration');