Cara Implementasi Pagination di Web: Panduan Lengkap untuk Developer Modern

Menampilkan data dalam jumlah besar di aplikasi web seringkali menjadi tantangan tersendiri. Jika semua data dimuat sekaligus, browser bisa lag, server terbebani, dan pengalaman pengguna jadi buruk. Di sinilah pagination datang sebagai solusi elegan.

Sebagai developer, saya sering menghadapi skenario di mana tabel memiliki ribuan bahkan jutaan record, atau API mengembalikan list yang sangat panjang. Memuat semuanya jelas bukan opsi yang realistis. Pagination bukan sekadar menampilkan angka halaman, tapi juga tentang mengoptimalkan performa, resource, dan yang terpenting, kenyamanan pengguna.

Artikel ini akan membahas secara mendalam cara mengimplementasikan pagination, mulai dari konsep dasarnya, berbagai tipe, hingga praktik terbaik di sisi backend maupun frontend. Kita akan melihat bagaimana developer modern menangani data berskala besar dengan efektif dan efisien.

Apa Itu Pagination dan Mengapa Penting?

Pagination adalah teknik membagi sejumlah besar data menjadi halaman-halaman yang lebih kecil dan terpisah. Daripada memuat semua 10.000 artikel blog sekaligus, Anda cukup memuat 10 atau 20 artikel per halaman. Pengguna kemudian bisa berpindah antar halaman (1, 2, 3, dst.) untuk melihat sisa data.

Mengapa pagination menjadi pilar penting dalam pengembangan aplikasi web modern?

• Performa Optimal: Hanya sebagian kecil data yang diambil dari database dan dikirim ke browser. Ini mengurangi beban server, mempercepat waktu loading, dan menghemat bandwidth.
• Pengalaman Pengguna (UX) yang Lebih Baik: Pengguna tidak kewalahan dengan daftar yang sangat panjang. Mereka bisa fokus pada beberapa item saja, dan memiliki kontrol untuk menjelajahi data sesuai keinginan.
• Manajemen Resource Efisien: Baik di sisi database, server, maupun klien, resource yang dibutuhkan menjadi lebih terkontrol dan efisien karena data yang diproses setiap saat terbatas.
• SEO Friendly: Search engine bisa mengindeks konten di berbagai halaman, dan dengan implementasi yang benar, ini bisa membantu penemuan konten Anda.

Bayangkan browsing toko online dengan jutaan produk tanpa pagination – pasti mustahil. Atau melihat daftar email di Gmail yang mencapai ribuan. Pagination adalah jembatan antara data yang melimpah dan pengalaman pengguna yang intuitif.

Tipe-tipe Pagination yang Umum Digunakan

Ada dua pendekatan utama dalam mengimplementasikan pagination, masing-masing dengan kelebihan dan kekurangannya:

1. Offset-based Pagination (Limit & Offset)

Ini adalah tipe pagination yang paling umum dan mungkin paling mudah dipahami. Cara kerjanya adalah dengan meminta server sejumlah data (LIMIT) setelah melewati sejumlah data tertentu (OFFSET).

Bagaimana Cara Kerjanya?

• Anda menentukan jumlah item per halaman (limit, misalnya 10).
• Anda menentukan halaman yang ingin ditampilkan (page, misalnya 1, 2, 3).
• Server kemudian menghitung offset: (page - 1) * limit.
• Query database akan mengambil limit data mulai dari offset tersebut.

Contoh Query SQL (PostgreSQL/MySQL):

Untuk halaman 1 (data 1-10):

SELECT * FROM articles ORDER BY created_at DESC LIMIT 10 OFFSET 0;

Untuk halaman 2 (data 11-20):

SELECT * FROM articles ORDER BY created_at DESC LIMIT 10 OFFSET 10;

Kelebihan:

• Sederhana dan Intuitif: Mudah dipahami dan diimplementasikan oleh developer maupun pengguna.
• Navigasi Halaman Langsung: Pengguna bisa langsung lompat ke halaman mana pun (misal, dari halaman 1 ke halaman 50).
• Kompatibel Luas: Didukung oleh hampir semua database dan ORM.

Kekurangan:

• Performa Menurun pada Data Besar: Ketika offset menjadi sangat besar (misal, OFFSET 100000), database harus memindai 100.000 baris sebelum mulai mengambil data yang diinginkan. Ini bisa sangat lambat.
• Masalah Data Terlewat atau Duplikat: Jika ada penambahan atau penghapusan data di tengah-tengah saat pengguna berpindah halaman, ada kemungkinan pengguna melihat data yang sama atau melewatkan data.

Kapan Menggunakan Offset-based Pagination?
Cocok untuk dataset berukuran menengah (ratusan ribu hingga jutaan record awal) di mana kecepatan lompat halaman penting, dan perubahan data real-time tidak terlalu sering atau krusial. Atau jika Anda tidak memiliki kendala performa pada skala yang sangat besar.

2. Cursor-based Pagination (Keyset Pagination)

Cursor-based pagination (sering disebut Keyset Pagination) menggunakan “kursor” sebagai penanda posisi terakhir yang dilihat, bukan nomor halaman. Kursor ini biasanya adalah nilai unik dan terurut dari kolom tertentu (misal, ID unik atau timestamp). Ini adalah pendekatan yang lebih modern dan performant untuk data berskala besar.

Bagaimana Cara Kerjanya?

• Saat permintaan pertama, server mengirimkan data dan “kursor” (biasanya ID atau timestamp dari item terakhir di halaman tersebut) untuk halaman berikutnya.
• Untuk mendapatkan halaman berikutnya, klien mengirimkan kursor ini ke server.
• Server kemudian mengambil data “setelah” kursor tersebut.

Contoh Query SQL (PostgreSQL/MySQL):

Asumsi data diurutkan berdasarkan id secara ascending:

Permintaan pertama (halaman awal):

SELECT * FROM articles ORDER BY id ASC LIMIT 10;

Klien mendapatkan data, dan jika item terakhir memiliki id = 10, kursor untuk halaman berikutnya adalah 10.

Permintaan berikutnya (setelah id = 10):

SELECT * FROM articles WHERE id > 10 ORDER BY id ASC LIMIT 10;

Jika ingin lebih robust dan menghindari masalah dengan ID yang sama atau data yang diupdate, seringkali dikombinasikan dengan kolom lain seperti timestamp:

SELECT * FROM articles WHERE (created_at, id) > ('2023-01-01 10:00:00', 12345) ORDER BY created_at ASC, id ASC LIMIT 10;

Kelebihan:

• Performa Luar Biasa: Tidak perlu memindai baris sebelumnya. Database hanya mencari baris setelah kursor, yang sangat cepat jika kolom kursor diindeks.
• Konsistensi Data Lebih Baik: Perubahan data (penambahan/penghapusan) tidak menyebabkan data terlewat atau duplikat antar halaman karena navigasi berdasarkan posisi relatif.
• Cocok untuk Infinite Scroll: Pendekatan ini adalah tulang punggung dari fitur “infinite scroll”.

Kekurangan:

• Tidak Ada Lompatan Halaman Langsung: Pengguna tidak bisa langsung lompat ke halaman 50. Navigasi hanya maju atau (dengan implementasi yang lebih kompleks) mundur.
• Implementasi Lebih Kompleks: Membutuhkan desain API dan query database yang lebih cermat, terutama jika ada sorting atau filtering tambahan.
• Membutuhkan Kolom yang Terurut Unik: Kursor harus berdasarkan kolom yang terurut dengan baik dan idealnya unik.

Kapan Menggunakan Cursor-based Pagination?
Ideal untuk dataset sangat besar (jutaan hingga miliaran record), aplikasi yang mengutamakan performa loading, atau ketika implementasi infinite scroll diinginkan. Contoh: feed media sosial, log sistem, riwayat transaksi.

Implementasi Pagination di Backend

Implementasi pagination sebagian besar terjadi di sisi backend, di mana data diakses dari database dan diformat untuk respons API.

Desain API untuk Pagination

Untuk Offset-based Pagination:

Endpoint API biasanya menerima parameter page dan limit (atau per_page).

GET /api/articles?page=2&limit=10

Respons API harus menyertakan data, serta informasi pagination untuk frontend:

{
  "data": [
    { "id": 11, "title": "Artikel 11", ... },
    { "id": 12, "title": "Artikel 12", ... }
    // ... 8 artikel lainnya
  ],
  "pagination": {
    "currentPage": 2,
    "perPage": 10,
    "totalPages": 100, // Total articles / perPage
    "totalItems": 1000,
    "nextPage": 3,
    "prevPage": 1
  }
}

Untuk Cursor-based Pagination:

Endpoint API biasanya menerima parameter after (atau cursor) dan limit.

GET /api/articles?limit=10&after=12345

Respons API:

{
  "data": [
    { "id": 12346, "title": "Artikel 12346", ... },
    { "id": 12347, "title": "Artikel 12347", ... }
    // ...
  ],
  "pagination": {
    "perPage": 10,
    "nextCursor": "12355" // ID dari item terakhir di `data`
    "hasMore": true
  }
}

Contoh Implementasi Backend (Node.js dengan Express dan PostgreSQL)

Asumsikan kita menggunakan library seperti pg atau ORM seperti Sequelize/Prisma.

Offset-based:

// controller/articleController.js
const getArticles = async (req, res) => {
  try {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 10;
    const offset = (page - 1) * limit;

    // Hitung total item untuk menentukan totalPages
    const totalItemsResult = await db.query('SELECT COUNT(*) FROM articles');
    const totalItems = parseInt(totalItemsResult.rows[0].count);
    const totalPages = Math.ceil(totalItems / limit);

    const articlesResult = await db.query(
      'SELECT * FROM articles ORDER BY created_at DESC LIMIT $1 OFFSET $2',
      [limit, offset]
    );

    res.json({
      data: articlesResult.rows,
      pagination: {
        currentPage: page,
        perPage: limit,
        totalPages: totalPages,
        totalItems: totalItems,
        nextPage: page  1 ? page - 1 : null,
      },
    });
  } catch (error) {
    console.error('Error fetching articles:', error);
    res.status(500).json({ message: 'Internal server error' });
  }
};

Cursor-based:

// controller/articleController.js
const getArticlesCursor = async (req, res) => {
  try {
    const limit = parseInt(req.query.limit) || 10;
    const afterCursor = req.query.after; // Kursor bisa berupa ID atau timestamp

    let query = 'SELECT * FROM articles';
    const params = [limit + 1]; // Ambil 1 lebih banyak untuk cek hasMore

    if (afterCursor) {
      // Asumsi cursor adalah ID artikel terakhir
      query += ' WHERE id > $2';
      params.push(afterCursor);
    }

    query += ' ORDER BY id ASC LIMIT $1';

    const articlesResult = await db.query(query, params);
    const hasMore = articlesResult.rows.length === limit + 1;
    const data = articlesResult.rows.slice(0, limit);
    const nextCursor = hasMore ? data[data.length - 1].id : null;

    res.json({
      data: data,
      pagination: {
        perPage: limit,
        nextCursor: nextCursor,
        hasMore: hasMore,
      },
    });
  } catch (error) {
    console.error('Error fetching articles:', error);
    res.status(500).json({ message: 'Internal server error' });
  }
};

Implementasi Pagination di Frontend

Sisi frontend bertanggung jawab untuk menampilkan kontrol pagination dan mengirim permintaan ke API sesuai dengan pilihan pengguna.

Contoh Implementasi Frontend (React.js)

Asumsikan kita menggunakan React, tapi konsepnya sama untuk framework atau library lain (Vue, Angular, Vanilla JS).

Offset-based Frontend Component:

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // Untuk HTTP request

function ArticleList() {
  const [articles, setArticles] = useState([]);
  const [pagination, setPagination] = useState({
    currentPage: 1,
    perPage: 10,
    totalPages: 1,
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchArticles = async (page) => {
    setLoading(true);
    setError(null);
    try {
      const response = await axios.get(`/api/articles?page=${page}&limit=${pagination.perPage}`);
      setArticles(response.data.data);
      setPagination(response.data.pagination);
    } catch (err) {
      setError('Gagal memuat artikel.');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchArticles(pagination.currentPage);
  }, [pagination.currentPage, pagination.perPage]); // Pastikan efek berjalan saat halaman berubah

  const handlePageChange = (page) => {
    if (page > 0 && page  ({ ...prev, currentPage: page }));
    }
  };

  const pageNumbers = [];
  for (let i = 1; i  (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>

      <div className="pagination-controls">
        <button
          onClick={() => handlePageChange(pagination.currentPage - 1)}
          disabled={pagination.currentPage === 1}
        >
          Sebelumnya
        </button>
        {pageNumbers.map(number => (
          <button
            key={number}
            onClick={() => handlePageChange(number)}
            disabled={number === pagination.currentPage}
            style={{ fontWeight: number === pagination.currentPage ? 'bold' : 'normal' }}
          >
            {number}
          </button>
        ))}
        <button
          onClick={() => handlePageChange(pagination.currentPage + 1)}
          disabled={pagination.currentPage === pagination.totalPages}
        >
          Berikutnya
        </button>
      </div>
    </div>
  );
}

export default ArticleList;

Cursor-based Frontend Component (Infinite Scroll Concept):

import React, { useState, useEffect, useRef, useCallback } from 'react';
import axios from 'axios';

function ArticleInfiniteScroll() {
  const [articles, setArticles] = useState([]);
  const [nextCursor, setNextCursor] = useState(null);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const observer = useRef();
  const lastArticleElementRef = useCallback(node => {
    if (loading) return;
    if (observer.current) observer.current.disconnect();
    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && hasMore) {
        fetchArticles();
      }
    });
    if (node) observer.current.observe(node);
  }, [loading, hasMore]);

  const fetchArticles = async () => {
    setLoading(true);
    setError(null);
    try {
      const params = { limit: 10 };
      if (nextCursor) {
        params.after = nextCursor;
      }
      const response = await axios.get('/api/articles_cursor', { params });
      setArticles(prevArticles => [...prevArticles, ...response.data.data]);
      setNextCursor(response.data.pagination.nextCursor);
      setHasMore(response.data.pagination.hasMore);
    } catch (err) {
      setError('Gagal memuat artikel.');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchArticles();
  }, []); // Hanya ambil halaman pertama saat komponen di-mount

  return (
    <div>
      <h1>Artikel Terbaru (Infinite Scroll)</h1>
      <ul>
        {articles.map((article, index) => {
          if (articles.length === index + 1) {
            return <li ref={lastArticleElementRef} key={article.id}>{article.title}</li>;
          } else {
            return <li key={article.id}>{article.title}</li>;
          }
        })}
      </ul>
      {loading && <p>Memuat lebih banyak artikel...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {!hasMore && !loading && <p>Semua artikel telah dimuat.</p>}
    </div>
  );
}

export default ArticleInfiniteScroll;

Pagination vs. Infinite Scroll: Kapan Menggunakan yang Mana?

Dua pendekatan ini sering menjadi pilihan saat menampilkan daftar panjang:

Pagination

• Cocok untuk:
  • Data yang perlu diacu secara spesifik berdasarkan halaman (misal, “artikel di halaman 5”).
  • Hasil pencarian yang ingin dijelajahi secara bertahap.
  • Tabel data di panel admin atau laporan finansial.
  • Pengguna yang ingin kembali ke halaman tertentu dengan mudah.
  • Konten yang membutuhkan konteks “akhir halaman” (misalnya, footer situs web).
• Kelebihan: Kontrol lebih besar bagi pengguna, memori browser lebih rendah karena tidak menyimpan semua data.
• Kekurangan: Membutuhkan klik lebih banyak, performa bisa jadi isu pada skala sangat besar jika menggunakan offset.

Infinite Scroll

• Cocok untuk:
  • Konten yang sifatnya eksplorasi tanpa akhir (feed media sosial, galeri gambar).
  • Pengguna yang cenderung menelusuri tanpa mencari item spesifik.
  • Aplikasi mobile yang seringkali memiliki ruang layar terbatas untuk kontrol pagination.
• Kelebihan: Pengalaman lebih mulus dan cepat, tidak ada klik.
• Kekurangan: Bisa menyulitkan pengguna untuk menemukan kembali item tertentu, bisa memakan banyak memori browser, footer situs mungkin sulit diakses. Debugging bisa lebih tricky jika ada masalah data.

Pilihan terbaik tergantung pada jenis konten dan perilaku pengguna yang Anda harapkan. Dalam banyak kasus, kombinasi keduanya (misalnya, infinite scroll untuk feed utama, dan pagination untuk hasil pencarian detail) bisa jadi solusi optimal.

Best Practices dalam Implementasi Pagination

Agar pagination Anda efektif dan robust, perhatikan beberapa praktik terbaik ini:

1. Validasi Input: Selalu validasi parameter page, limit, after di sisi backend. Mencegah nilai negatif, sangat besar, atau non-numeric yang bisa menyebabkan error atau beban server berlebihan (misal, limit=1000000).
2. Indeks Database: Pastikan kolom yang digunakan untuk sorting (misal, created_at, id) atau kursor (id, timestamp) memiliki indeks yang tepat di database untuk performa query yang cepat.
3. Ukuran Halaman yang Konsisten: Umumnya, antara 10-30 item per halaman adalah angka yang baik. Terlalu sedikit berarti terlalu banyak klik; terlalu banyak bisa memperlambat loading.
4. Informasi Pagination yang Lengkap: Di respons API, sertakan informasi total item, total halaman, halaman saat ini, dan link/kursor untuk halaman berikutnya/sebelumnya. Ini membantu frontend membangun kontrol yang lengkap.
5. Penanganan Kosong: Jika tidak ada data, respons API harus jelas dan frontend menampilkan pesan yang sesuai, bukan hanya daftar kosong.
6. Pertahankan State: Jika pengguna berpindah halaman lalu kembali, usahakan aplikasi mengingat halaman terakhir yang mereka kunjungi atau posisi scroll mereka. Ini bisa dilakukan dengan URL parameter atau state management.
7. UI/UX yang Jelas: Kontrol pagination harus mudah ditemukan dan dipahami. Sorot halaman saat ini. Pertimbangkan untuk menampilkan sejumlah kecil angka halaman di sekitar halaman saat ini (misal, 1…4, 5, 6…100) daripada semua angka.
8. Hindari COUNT(*) untuk Cursor-based: Salah satu keuntungan cursor-based adalah menghindari COUNT(*) yang mahal pada tabel besar. Jika Anda benar-benar membutuhkan total, pertimbangkan caching atau update secara berkala.
9. Optimasi Query: Gunakan ORDER BY yang sesuai dan hindari SELECT * jika hanya beberapa kolom yang dibutuhkan.
10. SSL/HTTPS: Pastikan semua komunikasi API menggunakan HTTPS untuk keamanan, terutama jika ada data sensitif.

Masalah yang Sering Terjadi dalam Implementasi Pagination

Dalam praktik, developer sering mengalami beberapa masalah umum. Berikut adalah beberapa di antaranya dan solusinya:

1. Performa Lambat pada Offset Besar (Offset-based Pagination)

• Gejala: Halaman awal cepat dimuat, tetapi semakin jauh halaman (offset besar), loading semakin lambat. Query database memakan waktu lama.
• Penyebab: Database harus memindai (skip) sejumlah besar baris sebelum mulai mengambil data yang relevan. Indeks pada kolom ORDER BY tidak membantu banyak untuk operasi OFFSET yang besar.
• Solusi:
  • Pertimbangkan untuk beralih ke cursor-based pagination jika dataset sangat besar dan performa krusial.
  • Jika tetap menggunakan offset, batasi total halaman yang bisa diakses pengguna atau pertimbangkan untuk hanya menampilkan “Next” dan “Previous” setelah batas tertentu.
  • Pastikan kolom yang digunakan dalam ORDER BY memiliki indeks yang sesuai.

2. Data Terlewat atau Duplikat Akibat Perubahan Data

• Gejala: Saat pengguna berpindah halaman, terkadang item yang baru ditambahkan muncul di halaman yang sudah dilihat, atau item yang dihapus menyebabkan halaman tidak lengkap atau duplikat.
• Penyebab: Terjadi perubahan data (insert/delete) di database saat pengguna sedang menjelajahi halaman, menggeser indeks atau offset data.
• Solusi:
  • Gunakan cursor-based pagination. Ini secara inheren lebih resisten terhadap masalah ini karena navigasi berdasarkan posisi relatif data, bukan posisi absolut.
  • Jika harus tetap menggunakan offset, ingatkan pengguna bahwa data bisa berubah dan mungkin perlu refresh, atau pertimbangkan untuk membekukan urutan hasil pencarian untuk sesi pengguna.

3. Terlalu Banyak Angka Halaman di Frontend

• Gejala: Dengan ribuan total halaman, menampilkan semua angka 1, 2, 3…10000 di UI pagination menjadi tidak praktis dan memakan ruang.
• Penyebab: Desain UI pagination yang tidak memfilter atau mengelompokkan angka halaman.
• Solusi:
  • Tampilkan hanya subset angka halaman di sekitar halaman saat ini (misalnya, 1 ... 4 5 [6] 7 8 ... 100).
  • Sediakan tombol “First”, “Last”, “Previous”, “Next”.
  • Gunakan input langsung untuk pengguna mengetik nomor halaman jika mereka tahu halaman yang ingin dituju.

4. SQL Injection pada Parameter Pagination

• Gejala: Aplikasi rentan diserang melalui parameter URL seperti page, limit jika tidak divalidasi dengan benar.
• Penyebab: Developer lupa untuk melakukan sanitasi atau validasi input dari pengguna sebelum menggunakannya dalam query database.
• Solusi:
  • Selalu gunakan prepared statements atau parametrized queries.
  • Validasi tipe data dan rentang nilai untuk page dan limit (misal, harus integer positif, tidak melebihi batas maksimum).

5. Salah Hitung Total Halaman atau Item

• Gejala: Total halaman yang ditampilkan di UI tidak akurat, atau jumlah item yang dikembalikan tidak sesuai ekspektasi.
• Penyebab: Logika perhitungan totalPages = Math.ceil(totalItems / limit) salah, atau query COUNT(*) tidak memperhitungkan filter yang sama dengan query data utama.
• Solusi:
  • Pastikan query COUNT(*) menggunakan kondisi WHERE yang identik dengan query data utama.
  • Periksa ulang logika pembulatan untuk totalPages.
  • Dalam cursor-based, jangan mengandalkan total halaman; fokus pada hasMore.

Pengalaman dan Pertimbangan Praktis

Dari pengalaman saya membangun berbagai aplikasi, ada beberapa hal yang sering saya pertimbangkan:

Skala Data Menentukan Pilihan: Untuk project kecil dengan data tidak lebih dari puluhan ribu record, offset-based pagination seringkali lebih dari cukup. Kecepatannya memadai dan implementasinya mudah. Namun, saat mulai menghadapi jutaan record, terutama di API yang sering diakses, beralih ke cursor-based pagination adalah keputusan bijak. Ini bukan hanya tentang performa database, tapi juga pengalaman end-user yang lebih konsisten.

Kompleksitas Query: Jika data Anda sangat kompleks dengan banyak join, filter dinamis, dan sorting multi-kolom, mengimplementasikan cursor-based pagination bisa jadi lebih rumit. Anda harus memastikan kursor bisa menangani semua kombinasi sorting/filtering tersebut. Terkadang, mengorbankan sedikit performa untuk kesederhanaan offset-based lebih masuk akal jika kompleksitas query sangat tinggi.

SEO dan Pagination: Dulu, ada praktik menggunakan rel="next" dan rel="prev" di header HTML untuk menandai halaman paginasi. Google menyatakan bahwa mereka tidak lagi menggunakan ini sebagai sinyal pengindeksan. Fokuslah pada konten yang unik di setiap halaman dan pastikan Googlebot bisa merangkak semua halaman Anda. Hindari duplikasi konten antar halaman. Jika Anda memiliki “view all” versi, pastikan itu canonical.

State Management di Frontend: Salah satu hal yang sering terlewat adalah state saat pengguna berpindah halaman atau kembali dari detail item. Menggunakan URL parameter (?page=X) adalah cara terbaik untuk menjaga state pagination dan memungkinkan pengguna berbagi link ke halaman tertentu. Ini juga membantu SEO.

Total Item vs. Has More: Saya sering melihat developer terobsesi menampilkan “Total X items” meskipun menggunakan cursor-based pagination. Menghitung total item dengan COUNT(*) pada tabel yang sangat besar akan menghancurkan keuntungan performa dari cursor-based. Lebih baik fokus pada indikator “Load More” atau “No More Data” dengan hasMore. Jika memang harus menampilkan total, pertimbangkan untuk meng-cache angka ini atau mengupdate secara asinkron.

Pilih Tools yang Tepat: Banyak ORM atau framework (misalnya Laravel Eloquent, TypeORM, SQLAlchemy) memiliki built-in fitur pagination yang sangat membantu. Manfaatkan itu, tetapi pahami juga implementasi di baliknya agar Anda bisa mengoptimalkannya atau beralih ke pendekatan lain jika dibutuhkan.

FAQ

Apa bedanya pagination dan infinite scroll?

Pagination membagi data menjadi halaman-halaman yang jelas dengan kontrol navigasi (nomor halaman, tombol next/prev). Infinite scroll secara otomatis memuat lebih banyak data saat pengguna mendekati akhir halaman, menciptakan pengalaman penelusuran tanpa akhir.

Mana yang lebih baik, offset-based atau cursor-based pagination?

Tergantung kebutuhan. Offset-based lebih mudah diimplementasikan dan memungkinkan lompatan halaman langsung, cocok untuk dataset menengah. Cursor-based lebih performant dan konsisten untuk dataset sangat besar, ideal untuk infinite scroll, tetapi lebih kompleks dan tidak memungkinkan lompatan halaman langsung.

Apakah pagination berpengaruh pada SEO?

Ya, secara tidak langsung. Implementasi yang baik memastikan semua konten Anda dapat diakses dan diindeks oleh search engine. Hindari masalah konten duplikat atau halaman yang tidak bisa dijangkau. Google tidak lagi menggunakan rel=”next”/”prev” sebagai sinyal utama, jadi fokus pada kualitas konten dan aksesibilitas.

Bagaimana cara menangani sorting dan filtering bersama dengan pagination?

Parameter sorting (misal, sort=price&order=asc) dan filtering (misal, category=electronics) harus diterapkan sebelum pagination di sisi backend. Logika OFFSET atau CURSOR harus diterapkan pada hasil yang sudah disortir dan difilter tersebut. Untuk cursor-based, pastikan kolom yang digunakan untuk sorting juga menjadi bagian dari kursor agar navigasi tetap konsisten.

Bolehkah saya menggunakan LIMIT dan OFFSET di semua kasus?

Boleh, untuk kasus sederhana atau data yang tidak terlalu besar. Namun, untuk aplikasi skala besar dengan jutaan record, penggunaan OFFSET yang besar akan menyebabkan bottleneck performa di database. Pertimbangkan cursor-based pagination atau strategi lain.

KESIMPULAN:

Pagination adalah fundamental dalam pengembangan web modern, jembatan antara jumlah data yang masif dengan pengalaman pengguna yang intuitif. Memilih antara offset-based dan cursor-based pagination bukanlah tentang mana yang “lebih baik” secara absolut, melainkan mana yang paling cocok untuk skala data, kebutuhan performa, dan pengalaman pengguna yang ingin Anda sajikan.

Memahami kedua pendekatan ini, bersama dengan praktik terbaik dalam desain API, optimasi database, dan implementasi frontend, akan memberdayakan Anda sebagai developer untuk membangun aplikasi yang tidak hanya fungsional, tetapi juga cepat, efisien, dan menyenangkan bagi pengguna. Ingatlah, fokus utama adalah selalu pada bagaimana kita bisa menyajikan informasi secara efektif tanpa mengorbankan performa atau kenyamanan.

TAGS: Pagination, Web Development, Backend, Frontend, API Design, Database, User Experience, Performance, Infinite Scroll, JavaScript

---

Baca Juga

• Panduan Lengkap Belajar Coding untuk Pemula hingga Profesional