Building a Static Encyclopedia with 1,000+ Entries, 8 Languages, and Zero Backend

I crafted a full-featured encyclopedia web app with 1,025 entries, 8 languages, and sub-second load times - all without relying on traditional backend infrastructure. The secret lies in mirroring a public REST API as static JSON files during the build process, deploying to Cloudflare Pages, and relying on the CDN for performance. The technology stack consists of Next.js 15, TypeScript, Tailwind CSS, next-intl, and Cloudflare Pages.

The main challenge was providing users with fast browsing, filtering, and searching capabilities for a large dataset that was publicly available via a REST API. Hitting the API on every request would have been slow and rate-limited, while using a traditional backend felt excessive for essentially static data. Multilingual support was also crucial due to the global audience.

The solution was to fetch the data once during the build process and serve it as static JSON files. This approach eliminated the need for runtime API calls, databases, and cold starts. The main page displays all 1,025 entries in a filterable grid, allowing users to sort by generation (9 options), type (18 options), base stat total range, legendary status, shiny mode, and text search.

To prevent the browser from freezing when loading all entries at once, the app employs batch loading with progressive rendering. It loads entries in batches of 50 using the `useEffect` hook and renders more cards as the user scrolls via Intersection Observer. The data is stored in a cache and fetched from the JSON mirror at build time, enabling fast and efficient browsing of the encyclopedia website.