Kupas Tuntas EGJS InfiniteGrid: Komponen dan Cara Pakainya!

Pernah merasa website makin berat setelah infinite scroll memuat ratusan card gambar? Masalah seperti scroll patah-patah, browser boros RAM, hingga layout berantakan memang sering muncul pada website modern berbasis visual.

Di sinilah EGJS InfiniteGrid adalah solusi yang mulai banyak dilirik developer JavaScript karena mampu menghadirkan grid layout tanpa batas dengan performa tetap ringan. Library ini cocok digunakan pada website dinamis seperti e-commerce, portal berita, hingga galeri desain.

Lewat artikel ini, kamu akan diajak mengenal fitur utama, memahami cara kerja DOM Recycling, hingga mempelajari cara instalasi dan implementasi dasar EGJS InfiniteGrid secara praktis dan mudah dipahami.

Apa Itu EGJS InfiniteGrid?

NAVER Corporation mengembangkan EGJS InfiniteGrid sebagai library open-source JavaScript untuk membuat layout grid tak terbatas dengan performa tinggi.

Secara sederhana, library ini dirancang untuk mengatur card dengan ukuran berbeda-beda tanpa membuat browser kewalahan. Cocok dipakai untuk:

• Galeri gambar
• Website portofolio
• Marketplace
• Media digital
• Feed konten sosial
• Website dinamis dengan ribuan item

Yang membuat EGJS berbeda dibanding library grid biasa adalah pendekatannya terhadap performa rendering.

Baca Juga: Apa Kegunaan DOM? Begini Fungsi, Elemen, dan Cara Menggunakannya

Banyak library infinite scroll hanya menambahkan elemen baru ke halaman terus-menerus. Awalnya memang terasa lancar. Tapi setelah scroll cukup jauh, DOM bisa dipenuhi ribuan node HTML. Di titik itu browser mulai lag.

EGJS InfiniteGrid mengatasi masalah tersebut menggunakan sistem virtualisasi yang dikenal DOM Recycling mechanism.

Kenapa Developer Banyak Melirik EGJS?

Karena library ini memang dibuat untuk kasus berat.

Misalnya:

• katalog e-commerce dengan ribuan produk,
• galeri desain,
• portal berita dengan thumbnail besar,
• atau aplikasi berbasis visual.

Alih-alih memaksa browser merender semua elemen sekaligus, EGJS hanya menampilkan item yang benar-benar terlihat di viewport.

Hasilnya:

• scrolling lebih stabil,
• penggunaan RAM lebih hemat,
• dan loading terasa jauh lebih ringan.

Tidak heran kalau library ini sering dianggap sebagai solusi website lemot loading gambar banyak.

Baca Juga: UI Library untuk React: Cari Tahu Favorit Developer di 2026

Cara Kerja DOM Recycling di EGJS

Salah satu alasan kenapa EGJS InfiniteGrid terasa ringan ada pada teknologi DOM Recycling. Pada infinite scroll biasa, browser terus menambahkan elemen baru ke halaman tanpa menghapus elemen lama. Akibatnya:

• jumlah DOM makin besar,
• RAM cepat penuh,
• scrolling mulai patah-patah,
• dan browser jadi berat.

EGJS mengatasi masalah ini dengan teknik virtualisasi otomatis. Hanya elemen yang terlihat di layar yang tetap dirender, sementara item di luar viewport akan dilepas sementara dari DOM. Meski begitu, posisi layout setiap item tetap disimpan di memori. 

Jadi saat pengguna scroll kembali, elemen bisa muncul lagi secara instan tanpa menghitung ulang layout dari awal. Hasilnya, performa website tetap stabil meski memuat ribuan konten visual.

Prosesnya Seperti Apa?

1. Deteksi Viewport

Library terus memantau posisi scroll pengguna. Saat sebuah item keluar dari area tampilan, sistem mulai menandainya untuk diproses.

2. Menyimpan Posisi Layout

Sebelum elemen dihapus dari DOM, EGJS menyimpan:

• posisi,
• ukuran,
• tinggi,
• dan offset item.

Karena hanya berupa data koordinat ringan, konsumsi memorinya kecil.

3. Unmount Elemen yang Tidak Terlihat

Elemen yang terlalu jauh dari viewport akan dilepas dari DOM aktif. Ini penting karena jumlah node HTML tetap stabil meski pengguna scroll sangat jauh.

4. Restore Saat Dibutuhkan

Ketika pengguna scroll balik, elemen lama langsung dikembalikan ke posisi semula dari cache.

Tanpa fetch ulang.
Tanpa re-layout berat.

Efeknya scrolling tetap terasa mulus.

Komponen EGJS yang Wajib Dipahami

Kalau baru pertama memakai library ini, ada beberapa komponen EGJS yang perlu dipahami.

Component

Berfungsi sebagai sistem event utama. Component menangani event lifecycle, callback, requestAppend, renderComplete, dan interaksi scroll.

Grid

Bagian ini menangani kalkulasi layout, jarak antar item, resize responsif, serta posisi elemen. Bisa dibilang ini “otak layout”-nya.

InfiniteGrid

Controller utama yang menghubungkan semuanya. Tugasnya adalah mengatur DOM recycling, append data, grouping item, dan sinkronisasi state.

Tipe Layout yang Tersedia di EGJS InfiniteGrid

Salah satu daya tarik EGJS ada pada fleksibilitas layout-nya. Kamu bisa memilih tipe grid sesuai kebutuhan UI.

MasonryInfiniteGrid

Layout paling populer.

Modelnya mirip Pinterest:

• lebar kolom tetap,
• tinggi card fleksibel.

Cocok untuk:

• portofolio desain,
• feed artikel,
• galeri gambar.

JustifiedInfiniteGrid

Tampilan ala Flickr. Tinggi setiap baris dibuat seragam, sementara lebar item menyesuaikan proporsi gambar.

Ideal untuk:

• galeri fotografi,
• media visual,
• showcase produk.

FrameInfiniteGrid

Menggunakan pola frame tertentu yang berulang. Biasanya dipakai untuk:

• landing page editorial,
• layout majalah digital,
• hero gallery.

PackingInfiniteGrid

Menggunakan algoritma bin-packing agar ruang kosong seminimal mungkin. Bagus untuk:

• dashboard visual,
• scrapbook layout,
• komposisi card acak.

Dukungan Framework untuk EGJS

Kabar baiknya, EGJS tidak cuma nyaman dipakai di Vanilla JavaScript. Library ini juga punya wrapper resmi untuk beberapa framework populer.

React

Package @egjs/react-infinitegrid cocok untuk aplikasi SPA modern yang membutuhkan update data secara dinamis. 

Integrasinya terasa natural karena EGJS dapat langsung memanfaatkan state management seperti useState, lazy loading, hingga infinite API pagination. 

Developer juga lebih mudah mengontrol render item menggunakan pendekatan JSX yang sudah familier di ekosistem React.

Contoh sederhananya:

import { MasonryInfiniteGrid } from "@egjs/react-infinitegrid";

<MasonryInfiniteGrid gap={10}>
 {items.map(item => (
   <div key={item.id} data-grid-groupkey={item.groupKey}>
     <img src={item.image} alt="" />
   </div>
 ))}
</MasonryInfiniteGrid>

Vue 3

Versi @egjs/vue3-infinitegrid memanfaatkan sistem reactive milik Vue sehingga perubahan data grid bisa berjalan otomatis tanpa konfigurasi rumit. Penulisan event juga mengikuti pola Vue seperti @request-append, membuat integrasinya terasa konsisten dengan workflow komponen Vue modern.

Svelte

Implementasi Svelte terkenal ringan karena hanya merender visibleItems yang benar-benar tampil di layar. Pendekatan ini membuat struktur DOM tetap minimal dan performa scrolling terasa lebih mulus.

Angular

Pada Angular, EGJS sudah dioptimasi menggunakan RxJS dan lifecycle Angular agar proses scroll berat tidak membebani keseluruhan aplikasi.

Cara Pakai EGJS InfiniteGrid

Sekarang masuk ke implementasi dasar. Contoh berikut menggunakan MasonryInfiniteGrid karena paling umum dipakai developer.

Langkah 1: Install Library

Gunakan NPM:

npm install @egjs/infinitegrid

Atau Yarn:

yarn add @egjs/infinitegrid

Setelah proses selesai, package siap dipakai di project.

Langkah 2: Buat Struktur HTML

Siapkan container utama.

<div id="my-infinite-grid">
 <div class="card" data-grid-groupkey="1">Card A</div>
 <div class="card" data-grid-groupkey="1">Card B</div>
 <div class="card" data-grid-groupkey="1">Card C</div>
</div>

Perhatikan atribut:

data-grid-groupkey

Atribut ini penting untuk membantu sistem virtualisasi mengenali grup item.

Langkah 3: Tambahkan CSS Dasar

#my-infinite-grid {
 position: relative;
 width: 100%;
}

.card {
 position: absolute;
 width: 250px;
 padding: 16px;
 border-radius: 8px;
 background: #f5f5f5;
}

Kenapa wajib position: absolute?

Karena engine EGJS menghitung posisi card secara manual.

Langkah 4: Inisialisasi dengan Vanilla JavaScript

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

const grid = new MasonryInfiniteGrid("#my-infinite-grid", {
 gap: 12,
 align: "start",
 useResizeObserver: true
});

grid.renderItems();

Beberapa konfigurasi penting:

• gap → jarak antar card
• align → posisi alignment layout
• useResizeObserver → auto responsive saat ukuran layar berubah

Langkah 5: Menangani Infinite Scroll

Bagian ini yang membuat grid berjalan tanpa batas.

grid.on("requestAppend", async (e) => {
 if (grid.isWait()) return;

 grid.wait();

 const nextGroupKey = parseInt(e.groupKey || 1) + 1;

 const newItems = [
   "Card Baru 1",
   "Card Baru 2",
   "Card Baru 3"
 ];

 const elements = newItems.map(text => {
   const el = document.createElement("div");
   el.className = "card";
   el.setAttribute("data-grid-groupkey", nextGroupKey);
   el.textContent = text;
   return el;
 });

 grid.append(elements, nextGroupKey);
});

Ketika user mencapai bagian bawah viewport, event requestAppend otomatis dipanggil.

Di sinilah biasanya developer mengambil data baru dari API.

Kesimpulan

EGJS InfiniteGrid menawarkan solusi modern untuk kebutuhan infinite scroll dengan performa yang tetap stabil. Berbeda dari grid biasa yang terus menambah elemen ke DOM, library ini memanfaatkan teknologi DOM Recycling agar proses rendering tetap ringan meski halaman memuat ribuan item visual sekaligus. 

Dukungan berbagai layout seperti Masonry, Justified, hingga Packing juga membuatnya fleksibel dipakai di banyak jenis project. 

EGJS sangat cocok digunakan pada website yang menampilkan banyak gambar dan membutuhkan scroll panjang, seperti e-commerce, portal berita, media digital, website portofolio, marketplace desain, hingga aplikasi feed sosial. 

Kalau project mulai terasa berat karena terlalu banyak card atau thumbnail, library ini bisa jadi solusi performa yang layak dipertimbangkan. 

Agar website dengan konten visual masif tetap stabil saat traffic meningkat, penggunaan VPS Murah dari IDwebhost juga bisa membantu menjaga performa server tetap optimal.