Mengapa Marquee Populer Tiga Pilar Kosong — dan Cara Mengisinya

Masalah: Pilar Muda, Marquee Setengah Kosong

Saat saya cek halaman olahraga, kebudayaan, dan kepemudaan KotaPortal, ketiga pilar punya marquee "Populer" vertikal. Tapi pilar yang baru — misal kepemudaan — cuma punya 3-4 item populer. Marquee-nya setengah kosong, jelek dilihat.

Perbaikan: Parallel Fetch + Merge Dedupe Server-Side

Commit a5f93eb memperbaiki ini dengan pola server-side parallel fetch + merge dedupe. Setiap pilar fetch dua hal paralel: sort=popular (limit 9) + sort=random (limit 9, presentation=visual). Lalu mergePopularWithRandom gabungin keduanya: populer dulu, dedupe by id, potong ke 9. Hasilnya marquee selalu penuh 9 item, walau pilar masih muda.

Fetch Paralel Menghindari Waterfall

Next.js bilang parallel data fetching mengurangi waterfall dan total waktu load [4]. Kalau sequential, random nunggu popular selesai — boros waktu.

Logika Merge

Merge-nya di server component (populer.ts), bukan client. Map-based merge: existing entities (populer) never overwritten, novel entities (random) appended [5]. Dedupe by id bikin item yang sama tidak dobel. Popular priority — kalau item ada di kedua list, versi populer yang dipakai.

function mergePopularWithRandom(popular: Item[], random: Item[]): Item[] {
  const seen = new Set()
  const merged: Item[] = []
  for (const item of popular) {
    if (!seen.has(item.id)) {
      seen.add(item.id)
      merged.push(item)
    }
  }
  for (const item of random) {
    if (!seen.has(item.id) && merged.length < 9) {
      seen.add(item.id)
      merged.push(item)
    }
  }
  return merged
}

RSC Next.js eksekusi sequential dalam tree [6]. Tapi di sini kita fetch di satu server component (page.tsx), jadi Promise.all([fetchPopular(), fetchRandom()]) jalan paralel. Tidak perlu restructure komponen.

Test Coverage

populer.test.ts cover merge logic (popular priority, dedupe, slice 9, empty cases). Semua hijau.

Sumber

1. Next.js: Parallel data fetching reduces waterfalls
2. FrontendCache: Map-based merge utility for idempotent dedupe
3. Vercel: RSC execute sequentially; restructure with composition for parallel fetch