Apa yang Anda dapatkan dari Next.js secara langsung

  • Data cache – Di Next.js 13+, setiap panggilan fetch() masuk ke dalam cache memori per-permintaan. Menambahkan opsi revalidate memberi tahu runtime untuk menyegarkan data setelah interval tertentu, mengubah panggilan API yang "hot" menjadi "cold" hanya saat dibutuhkan.
  • Full-route cache – Framework ini menyimpan HTML yang telah dirender dan data yang dibutuhkan untuk seluruh rute. Pengunjung yang kembali akan melihat transisi instan karena server melewati proses re-rendering.
  • ISR – Halaman statis dibuat ulang di latar belakang sementara versi lama tetap melayani trafik. Ini memungkinkan Anda menjaga situs besar tetap statis tanpa perlu rebuild penuh setiap kali konten berubah.
  • Server Component cache() – Helper cache dari React melakukan memoisasi kalkulasi berat atau koneksi database selama durasi satu permintaan, menghindari pekerjaan duplikat di dalam pohon komponen sebuah halaman.

Cache ini menyelesaikan masalah “first-hit”, tetapi masih berjalan di dalam proses Node. Untuk melindungi server dan database, dorong caching ke arah luar.

Lapisan eksternal yang dapat Anda tambahkan

Lapisan Apa yang disimpan Alat umum Bagaimana ia membantu
CDN Aset statis, HTML, JSON API Cloudflare, Akamai, AWS CloudFront Memindahkan konten ke lokasi edge, memperpendek waktu perjalanan (round-trip) ke pengguna
Reverse proxy Respons seluruh halaman sebelum mencapai Node Nginx, Varnish Melayani halaman yang di-cache secara langsung, mengurangi beban pada instance Next.js
Application-level cache Hasil query DB yang berat atau panggilan API Redis, Memcached Menyediakan penyimpanan key-value yang cepat yang tetap ada setelah restart server dan dapat dibagikan di berbagai instance aplikasi

Setiap lapisan berada lebih jauh dari database asal, sehingga jika terjadi "miss" pada satu level, hal itu akan berlanjut ke level berikutnya, dan akhirnya hanya mencapai database jika benar-benar diperlukan.

Menjaga kesegaran cache

Invalidasi sering menyulitkan banyak tim. Tiga pola praktis yang bekerja dengan baik adalah:

  • Time-based (TTL) – Tetapkan masa kedaluwarsa tetap untuk entri cache. Mudah dikonfigurasi tetapi dapat menyajikan data usang hingga timer berakhir.
  • Event-driven – Hubungkan ke CMS atau sumber data apa pun yang mengirimkan webhook saat konten berubah. Webhook tersebut akan memicu penghapusan (purge) entri cache yang terkait.
  • Tag-based – Lampirkan tag logis ke sekelompok fetch (misalnya, product-list). Saat ada item dalam grup tersebut yang berubah, satu panggilan ke revalidateTag('product-list') akan menghapus setiap entri yang menggunakan tag tersebut.

Mencampur pendekatan-pendekatan ini memungkinkan Anda menyeimbangkan kesegaran data dengan tingkat cache-hit.

Hierarki yang bekerja untuk sebagian besar tim

  1. Browser cache – Aset statis (CSS, JS, gambar) mendapatkan max-age yang panjang sehingga perangkat pengguna tidak perlu meminta ke jaringan lagi.
  2. CDN – Node edge menyimpan halaman HTML lengkap dan JSON API, menghormati header Cache-Control yang Anda atur di Next.js.
  3. Reverse proxy – Instance Nginx atau Varnish berada di depan server Next.js, melayani respons yang di-cache untuk rute yang jarang berubah.
  4. Next.js internal cache – Cache data dan rute framework menangani memoisasi per-permintaan dan ISR.
  5. Application cache – Redis menyimpan hasil query database yang berat, dengan kunci (key) berdasarkan parameter query atau tag.
  6. Database – Sumber kebenaran (source of truth) utama, yang hanya di-query saat terjadi cache miss di setiap level yang lebih tinggi.

Saat permintaan tiba, ia akan menelusuri daftar ini hingga ada lapisan yang menjawabnya. Jawaban tercepat yang menang, dan respons tersebut akan ditulis kembali ke atas rantai untuk pemanggilan di masa mendatang.

Menyusun potongan-potongan tersebut

  1. Atur header Cache-Control di rute API Anda
  2. Konfigurasi CDN Anda – Aktifkan edge caching untuk endpoint HTML dan JSON, dan pastikan CDN menghormati Cache-Control.
  3. Deploy reverse proxy – Letakkan Nginx di depan server Next.js Anda.
  4. Tambahkan Redis – Cache hasil query database yang berat.
  5. Gunakan revalidateTag di komponen Anda – Panggil revalidateTag untuk menghapus cache internal Next.js untuk tag tertentu.

Kesimpulan

Satu cache di dalam Next.js mempercepat permintaan pertama, tetapi skalabilitas sejati berasal dari tumpukan (stack) yang disiplin: browser → CDN → reverse proxy → framework → Redis → database. Konfigurasikan setiap lapisan, tangani invalidasi dengan waktu, event, dan tag, lalu pantau metrik Anda. Latensi tetap rendah sementara backend Anda mampu bertahan dari lonjakan trafik.