38 Implementasi Pagination dengan limit dan offset

Pagination adalah salah satu pilar utama dalam pengembangan aplikasi web dan backend APIs yang efisien. Dengan data yang terus membengkak di database, mustahil rasanya untuk memuat keseluruhan data sekaligus pada satu kali request. Oleh karena itu, teknik pagination digunakan untuk mengirimkan data secara parsial, biasanya dalam bentuk halaman (page) yang mudah dicerna oleh client.

Salah satu metode pagination yang paling sederhana dan sering digunakan adalah kombinasi antara limit dan offset. Artikel ini akan membedah 38 implementasi pagination menggunakan limit dan offset dari aspek query, API, serta beberapa variasi dan optimasi yang bisa diterapkan di dunia nyata.

Apa Itu limit dan offset?

• limit: Menentukan jumlah maksimum data yang dikembalikan oleh query.
• offset: Menentukan berapa banyak data yang dilewati sebelum mulai mengambil data.

Misal, jika kita punya tabel user seperti berikut:

Query SQL:

SELECT * FROM users LIMIT 2 OFFSET 2;

Hasil:

Mengapa Pagination Penting?

1. Meningkatkan performa: Membatasi jumlah data yang diambil.
2. UX/Responsif: Data dikirim bertahap, pengalaman pengguna lebih baik.
3. Resource Friendly: Mengurangi beban server dan bandwidth.
4. Kontrol navigasi data: Memudahkan user menelusuri dan mencari data.

Diagram Alur Pagination

Mari kita lihat alur data dengan pagination sederhana:

flowchart LR
A[Client Request] --> B{Include limit & offset?}
B -- Yes --> C[Query DB with LIMIT/OFFSET]
C --> D[Return data + meta info]
B -- No --> E[Return error/default limit]

Penerapan Dasar: API Express.js + PostgreSQL

// Contoh endpoint GET users dengan pagination limit-offset
app.get('/users', async (req, res) => {
    // Ambil parameter dari query string dengan default
    let limit = parseInt(req.query.limit, 10) || 10;
    let offset = parseInt(req.query.offset, 10) || 0;
    
    const result = await client.query('SELECT * FROM users LIMIT $1 OFFSET $2', [limit, offset]);
    res.json({
        page_size: limit,
        offset: offset,
        data: result.rows,
    });
});

Begitu sederhana! Namun, implementasi pagination tidak berhenti sampai sini.

38 Implementasi / Variasi Pagination Limit-Offset

Berikut ini adalah 38 teknik praktis, variasi, dan biar lebih luas, best practice di berbagai skenario menggunakan limit dan offset:

1. Pagination Pada Query SQL Standar

SELECT * FROM orders LIMIT 25 OFFSET 50;

2. Validasi Parameter limit dan offset

Selalu validasi dan batasi nilainya:

limit = Math.max(1, Math.min(50, limit));
offset = Math.max(0, offset);

3. Pagination pada RESTful API

Endpoint standar:

GET /posts?limit=20&offset=60

4. Pengembalian Informasi Meta-data

Selalu kirim total_count, current_page, next_offset, dst:

{
  "total": 480,
  "page_size": 20,
  "offset": 40,
  "next_offset": 60,
  "data": [...]
}

5. Penerapan di ORM (Sequelize)

User.findAll({ limit: 10, offset: 3 })

6. Menghitung Total Data

SELECT COUNT(*) FROM orders;

7. Pagination di GraphQL

Biasanya diimplementasi dengan first dan skip, namun intinya sama.

query {
  users(first: 10, skip: 30) { id, username }
}

8. Pagination pada MongoDB

db.users.find().skip(20).limit(10)

9. Penerapan pada DataTables (datatable.js)

Sering kali otomatis mengirim parameter start (offset) dan length (limit).

10. Pagination pada Flutter/Dart Client

Mengirim HTTP GET dengan limit dan offset di query params.

11. Kombinasi dengan Sorting

Pastikan ada ORDER BY agar hasil konsisten.

SELECT * FROM products ORDER BY id ASC LIMIT 10 OFFSET 30;

12. Custom Default Value

Tetapkan batas limit maksimal agar tidak membebani server.

13. Tombol Next/Prev di UI

Offset = (page - 1) * limit
Next offset = offset + limit
Previous offset = offset - limit

14. Caching dan Key Pagination di Backend

Cache dengan key yang memuat pasangan limit-offset, contoh: users:10:30.

15. PRG (Post-Redirect-Get)

Setelah submit form, redirect dengan parameter limit dan offset pada query string.

16. Limit-Offset di Prisma (Node.js ORM)

prisma.user.findMany({ skip: 10, take: 20 });

17. Penerapan pada Laravel (PHP)

User::skip($offset)->take($limit)->get();

18. Pagination di Python Django ORM

User.objects.all()[offset:offset+limit]

19. Pagination pada GQL Firebase

Untuk query kecil, gunakan limit/offset, untuk besar gunakan keyset.

20. Kombinasi Filter + Pagination

Gabungkan WHERE dengan LIMIT/OFFSET di query.

21. Tampilkan Informasi Last Page

Total pages = ceil(total / limit)

22. Tampilkan Jumlah Data Saat Ini

Display: “Menampilkan 21–40 dari 480”

23. Batasi Data Per Page di Backend

Contoh: limit maksimum 100 per page.

24. Reverse Pagination

Urutkan DESC dan offset dihitung dari belakang.

25. Printing All Data via Batch Pagination

Lakukan fetch data per paging dan gabungkan.

26. SSR Pagination di Next.js

Fetch data di server side props dengan limit-offset.

27. Pagination di Excel Export

Export data secara bertahap dengan batching.

28. Infinite Scroll

Saat mendekati akhir data, fetch batch berikutnya (offset ++).

29. Pagination Bersarang (Nested Data)

Misal: Komentar per post dengan limit-offset per post.

30. Pagination dengan Multiple Join

Gabungkan banyak tabel, tetap paginasi utama di tabel utama.

31. Optimasi Offset Besar

Offset besar = lambat. Pakai keyset atau cursor pagination sebagai alternatif.

32. SQL Subquery untuk Efisiensi

SELECT * FROM (SELECT ... LIMIT 100000 OFFSET 100000) sub;

33. Pagination Pada Query Aggregrasi

Batasi aggregate column dengan limit-offset.

34. Dukungan Sortir Multipel Field

ORDER BY banyak field + limit-offset.

35. Kembalikan has_next: Boolean di Metadata

has_next = (offset + limit) < total

36. Navigasi ke Page Spesifik

offset = (page_number - 1) * limit

37. Pagination di CLI Tools

Misal psql, mysql CLI mendukung fetch dengan limit dan offset.

38. Rate Limiting per Halaman

Gabungkan pagination dan rate limit: 1 request/page per detik.

Tantangan Pagination Limit-Offset

• Performance Penalty pada Offset Besar:
  Semakin besar offset, semakin buruk performa. Database akan tetap menghitung dan melewati seluruh data sebelum offset, lalu mengambil limit.

• Tersedianya Data Tidak Konsisten:
  Jika ada insert/delete antara 2 fetch, data bisa “loncat” atau terduplikasi.

• Alternatif:
  Cursor/Seek Pagination, UUID-based, atau Keyset Pagination.

Simulasi dan Studi Kasus: API Produk

Simulasi List Produk (limit: 10, offset: 30):

GET /api/products?limit=10&offset=30

Response:
{
  "total": 145,
  "limit": 10,
  "offset": 30,
  "has_next": true,
  "data": [
    // list produk id 31-40
  ]
}

Tabel Ringkasan: Kelebihan & Kekurangan Limit-Offset Pagination

Kesimpulan

Pagination dengan limit dan offset adalah teknik yang powerful, fleksibel, dan masih jadi andalan berbagai stack teknologi. Namun, selalu pahami kelebihan dan kekurangannya, dan gunakan variasi yang sesuai kebutuhan aplikasi Anda dari daftar 38 implementasi di atas. Untuk kebutuhan skala enterprise atau data yang sangat besar, pertimbangkan migrasi ke cursor-based pagination untuk performa dan konsistensi yang lebih baik.

Apakah Anda punya tip lain soal pagination limit-offset? Share di komentar! 🚀