Membuat Infinite Scroll di Vue.js: Teknik Praktis dengan Intersection Observer

Infinite Scroll adalah teknik yang memungkinkan pengguna untuk terus menggulir tanpa harus mengklik tombol "Load More" atau berpindah halaman. Ini sering digunakan pada aplikasi seperti media sosial, e-commerce, dan blog untuk meningkatkan pengalaman pengguna.

Salah satu cara efisien untuk menerapkan Infinite Scroll di Vue.js adalah dengan menggunakan Intersection Observer API, yang mendeteksi apakah elemen tertentu terlihat di viewport.

📌 Baca juga: Lazy Loading Vue Router: Cara Meningkatkan Performa Aplikasi

---

1. Apa Itu Intersection Observer?

Intersection Observer API adalah fitur JavaScript yang memungkinkan kita mendeteksi kapan suatu elemen masuk atau keluar dari viewport. Ini lebih efisien dibandingkan event scroll, karena tidak membebani performa aplikasi dengan event listener yang terus berjalan.

2. Struktur Dasar Infinite Scroll di Vue.js

Untuk menerapkan Infinite Scroll, kita akan:
✅ Menampilkan daftar item dari API atau array lokal.
✅ Menambahkan elemen pemicu (<div ref="loadMore">) di akhir daftar.
✅ Menggunakan Intersection Observer untuk mendeteksi saat elemen ini terlihat.
✅ Memuat lebih banyak data secara otomatis saat pengguna mencapai elemen tersebut.

3. Implementasi Infinite Scroll dengan Vue.js

a. Setup Data dan API Fetching

Buat komponen InfiniteScroll.vue dan tambahkan kode berikut:

<template>
  <div class="container">
    <h1>Infinite Scroll di Vue.js</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <div ref="loadMore" class="loading">Memuat lebih banyak...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const items = ref([])
const page = ref(1)
const loadMore = ref(null)

const fetchItems = async () => {
  const response = await fetch(`https://api.example.com/items?page=${page.value}`)
  const data = await response.json()
  items.value.push(...data)
  page.value++
}

const createObserver = () => {
  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) {
        fetchItems()
      }
    },
    { rootMargin: '50px' }
  )

  if (loadMore.value) {
    observer.observe(loadMore.value)
  }
}

onMounted(() => {
  fetchItems()
  createObserver()
})
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 10px;
  background: #f5f5f5;
  margin: 5px 0;
  border-radius: 5px;
}
.loading {
  text-align: center;
  padding: 10px;
  font-weight: bold;
}
</style>

4. Bagaimana Cara Kerjanya?

1. Mengambil data dari API berdasarkan halaman (fetchItems).

2. Mengamati elemen <div ref="loadMore"> menggunakan Intersection Observer.

3. Saat elemen masuk ke viewport, fetchItems() dipanggil untuk memuat lebih banyak data.

5. Manfaat Infinite Scroll dengan Intersection Observer

✅ Lebih ringan dibandingkan event scroll listener.
✅ Mengurangi jumlah request ke server dengan pemanggilan bertahap.
✅ Meningkatkan UX dengan navigasi yang lebih lancar.

Kesimpulan

Dengan menggunakan Intersection Observer API, kita bisa membuat Infinite Scroll di Vue.js secara efisien tanpa membebani performa aplikasi. Teknik ini sangat berguna untuk menampilkan daftar panjang data dengan pengalaman yang lebih mulus bagi pengguna.

📌 Baca juga: Lazy Loading Vue Router: Cara Meningkatkan Performa Aplikasi