Pagination & Lazy Loading: Kenapa HP-mu Gak Meledak Buka Instagram?

Bayangin Buka Aplikasi Isi 1 Miliar Foto...

Bayangin Budi membuka Instagram. Di database Instagram, ada miliaran foto yang pernah di-upload umat manusia. Kalau Backend Instagram bodoh dan langsung ngirim 1 miliar foto itu ke HP Budi (pakai Query SQL SELECT * FROM photos), kuota Budi bakal habis dalam 1 detik, RAM HP-nya penuh, dan aplikasinya bakal Crash (menutup sendiri) seketika!

Masalahnya: Terlalu Banyak Data (Data Overload)

Server tidak boleh egois membuang semua data yang ia punya ke layar pengguna. Otak manusia dan memori HP memiliki kapasitas yang sangat terbatas. Pengguna hanya butuh melihat 5 foto pertama saat mereka membuka layar (Viewport).

Di Sinilah Konsep Pagination & Lazy Loading Masuk!

Untuk memecah belah data raksasa menjadi potongan-potongan kecil yang gampang dicerna, developer menggunakan kombinasi dua teknik maut:

1. Pagination (Buku Halaman di Backend)

Backend Developer menggunakan algoritma Pagination (Paginasi). Mereka menginstruksikan database: "Hei MySQL, tolong kasih aku 10 foto aja dulu ya (LIMIT 10). Sisanya nanti aja nyusul."

Saat Budi mulai scroll layarnya ke bawah, Frontend akan berteriak ke Server: "Woi Server! Budi udah mau sampai bawah nih, minta 10 foto selanjutnya dong!" (Ini menggunakan teknik Offset/Cursor Pagination).

2. Lazy Loading (Si Pemalas di Frontend)

Meskipun Backend sudah mengirim 10 foto, Frontend Developer juga tidak mau kalah pintar. Mereka menggunakan teknik Lazy Loading.

Jika di layar HP Budi cuma muat 2 foto, maka Browser HANYA akan me-download resolusi tinggi untuk 2 foto tersebut. 8 foto lainnya yang masih ada di bawah (belum ke-scroll) dibiarkan kosong berupa kotak abu-abu (Skeleton/Placeholder) sampai Budi benar-benar menggeser layarnya ke area tersebut.

Intinya: Ilusi Infinite Scroll (gulir tanpa batas) di TikTok atau Instagram adalah hasil kerja sama yang harmonis antara trik mencicil data di Backend dan trik malas me-render di Frontend demi menjaga HP-mu tetap dingin!