As a developer and a huge football fan, I wanted to build a daily puzzle hub. I created Futbolle — a platform with 12 different daily football puzzles (like Wordle, Immaculate Grid, Missing XI, etc.) all in one place.
But I faced a huge technical challenge right at the beginning: The Player Database.
To make the games work, I needed a dataset of over 80,000 football players (active, retired, and legends).
My goals were simple:
- Keep the hosting costs at $0.
- Make the site blazing fast.
- Avoid database connection pool issues if traffic spikes.
Here is how I solved this using Next.js App Router without paying a single cent for a database.
1. Static JSON & React Server Components ⚡
Instead of setting up PostgreSQL or MongoDB, I decided to keep all the 80,000 players in optimized .json files.
If I sent this JSON to the client, the browser would instantly crash. Instead, I heavily utilized React Server Components (RSC). When a user visits a game, the server reads the JSON, filters the players based on today's puzzle rules, and sends only the required small chunk of HTML to the client.
Zero client-side processing, zero database queries. The page loads instantly.
2. The "Daily" Logic without Cron Jobs ⏱️
I didn't want to run a server cron job every midnight to update the games.
Instead, the "seed" (the logic that determines today's mystery player) is calculated purely based on new Date(). This means the game naturally refreshes itself at midnight. It's completely stateless.
3. SEO Trick for Daily Content 🔍
Since the content changes every day, I had to ensure Google knows about it. In my sitemap.ts, I dynamically generate the lastModified tag specifically for the games that update daily. This forces search engine bots to recrawl those specific pages every 24 hours.
Building Futbolle taught me that you don't always need a complex cloud database architecture for a heavy-data app. Sometimes, a well-structured JSON file and Server Components are all you need.
If you want to test the performance (or just play some football puzzles), check it out here: futbolle.com.
How do you handle heavy static data in your Next.js projects? Let me know in the comments!
Top comments (0)