- NEXT_PUBLIC_API_BASE: Keep public (just the endpoint URL)
- SERVER_ID: Remove NEXT_PUBLIC_ prefix (private identifier)
- ACCESS_TOKEN: Remove NEXT_PUBLIC_ prefix (sensitive credential)
Since fetching is server-side, credentials never reach the browser.
Only API_BASE needs to be public if accessed from client in future.
- 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