Lazy Loading 2,800+ Baby Names: How We Cut Page Size by 77%

When your baby name website grows to 3,000+ names, page performance becomes a real challenge. Here's how we solved it. The Problem Our browse page loads names grouped by origin — Irish, French, Japanese, Hebrew, and 40+ more categories. With 2,800+ names, the page was shipping 3.6MB of HTML on first load. Category pages like Popular Names had similar issues. Users on mobile were waiting 4-6 seconds for the page to become interactive. Not great for a tool people use while excitedly planning their baby's name. The Solution: Progressive Disclosure Instead of loading all names at once, we show the first 30 names per section and let users expand with a "Show all X names" button. Architecture We kept our pages as server components for SEO (search engines see all names), but wrapped the display logic in client components : // BrowseNameList.tsx - Client Component " use client " ; import { useState } from " react " ; export default function BrowseNameList ({ groupedNames }) { return ( <> { Obj