Cara Kerja Pagination: Menampilkan Ribuan Data Tanpa Bikin Web Lemot

Kenapa Kita Butuh Fitur 'Halaman Selanjutnya'?

Saat aplikasi atau blog buatanmu masih baru, jumlah datanya mungkin cuma 10 baris. Menarik semua data itu dari *Backend* menggunakan SELECT * FROM articles dan menampilkannya langsung ke *Frontend* tidak masalah.

Tapi, setahun kemudian, artikelmu sudah ada 5.000. Jika Backend mengirimkan 5.000 teks artikel (beserta URL gambarnya) dalam satu waktu, memori browser HP pengunjung akan kepenuhan, kuota mereka tersedot, dan layar akan freeze (macet) sebelum error.

Solusinya adalah teknologi memecah data: Pagination (Halaman) atau Infinite Scroll (Scroll Tanpa Batas ala TikTok/Instagram).

Rahasia Backend: Limit dan Offset (Skip)

Keajaiban Pagination sebenarnya terjadi di Database (Backend). Frontend tidak mendownload 5.000 data lalu menyembunyikannya dengan CSS. Frontend hanya meminta data secukupnya kepada Backend.

Metode yang paling umum dipakai adalah menggunakan Limit (Batas Jumlah) dan Offset (Lompati/Lewati) di perintah SQL.

• Halaman 1: Frontend meminta data ke API: "Berikan saya 10 artikel pertama."
  Query Database: SELECT * FROM articles LIMIT 10 OFFSET 0.
• Halaman 2: User menekan tombol Halaman 2. Frontend meminta API: "Berikan saya 10 artikel, tapi tolong lompati 10 artikel yang pertama."
  Query Database: SELECT * FROM articles LIMIT 10 OFFSET 10.
• Halaman 3: LIMIT 10 OFFSET 20 (Ambil 10, lompati 20 data pertama), dan seterusnya.

Pentingnya Mengirim Data 'Metadata'

Selain mengirimkan kumpulan (Array) 10 artikel tersebut, sebuah REST API yang baik juga harus mengirimkan "Bocoran Info" (Metadata) kepada Frontend agar Frontend tahu cara menggambar tombol paginasinya.

Contoh respon JSON Pagination yang profesional:

{
  "data": [...10 objek artikel...],
  "meta": {
    "currentPage": 2,
    "dataPerPage": 10,
    "totalItems": 5000,
    "totalPages": 500 
    // (Frontend butuh angka 500 ini untuk merender tombol angka 1 sampai 500)
  }
}

Pagination vs Infinite Scroll

Teknologi di belakang (Backend)-nya persis sama (menggunakan Limit & Offset/Cursor). Yang membedakan hanya tampilan Visualnya (Frontend).

• Pagination (Angka 1, 2, 3): Cocok untuk situs yang butuh navigasi akurat (seperti Katalog E-Commerce atau Daftar Tabel Admin) di mana user mungkin ingin sengaja lompat kembali ke halaman 4.
• Infinite Scroll: Sangat adiktif dan cocok untuk *Feed* Sosial Media. Saat scroll pengguna hampir menyentuh dasar layar (Bottom of Window), JavaScript Frontend secara sembunyi-sembunyi menembak URL API untuk meminta data Halaman 2, lalu langsung menempelkannya (Append) ke baris bawah layar secara halus.