Peng-cache-an halaman web dan respons API dapat mengatasi masalah penurunan performa sistem dan UX yang disebabkan oleh permintaan data berulang yang tidak perlu.
Berbagai teknik peng-cache-an dapat digunakan, termasuk penyimpanan browser, Axios Interceptor, Nuxt keep-alive, Vuex, dan peng-cache-an web server. Peng-cache-an halaman server-side rendering efektif untuk meningkatkan performa, tetapi perlu diperhatikan penggunaan memorinya.
Invalidasi cache memungkinkan penerapan segera saat distribusi sumber daya seperti gambar.
Anda mungkin sering mengalami hal ini: ketika menekan tombol kembali (back) di situs web, halaman yang sudah dimuat sebelumnya dimuat ulang.
Misalnya, di toko online, setelah Anda mengklik produk yang muncul di hasil pencarian, lalu menekan tombol kembali,
pencarian dilakukan ulang.
Memuat ulang halaman yang sudah dimuat sebelumnya tidak hanya buruk untuk UX, tetapi juga menimbulkan masalah yang lebih besar secara sistemik.
Memuat ulang halaman menyebabkan pemanggilan API yang tidak perlu dan meningkatkan trafik.
Hal ini dapat menyebabkan masalah biaya, dan jika Anda mengumpulkan data dari halaman tersebut, dapat menyebabkan pengumpulan data tertentu secara berlebihan.
Untuk mengatasi hal ini, menyimpan cache halaman atau hasil API dapat memberikan efek yang signifikan.
1. Menggunakan ruang penyimpanan browser (localStorage, SessionStorage, IndexedDB)
- localStorage mempertahankan data meskipun browser ditutup.
- sessionStorage menghapus data ketika browser atau tab ditutup.
- IndexedDB digunakan untuk menyimpan data dalam jumlah besar. Penyimpanan bersifat asinkron dan merupakan NoSQL. Gambar dan video juga dapat disimpan. Kapasitas maksimum bervariasi menurut browser, tetapi sekitar 50mb. Dapat digunakan secara offline.
2. Axios Interceptor
Jika Anda menggunakan axios, Anda dapat menggunakan interceptor bawaan. Untuk permintaan yang sama, ia mengembalikan respons tanpa mengirimkannya ke server.
Caching dalam framework Nuxt
Dengan membungkus komponen tertentu dengan tag keep-alive, Anda dapat menyimpan cache komponen tersebut.
Anda dapat mengatur apakah akan memanggil fetch() selama rendering sisi server. Jika false, fetch hanya dipanggil di sisi klien.
Ada juga cara menggunakan Vuex. Prinsipnya sama dengan penyimpanan browser.
Anda dapat menggunakan web server (Nginx) untuk memasukkan pengaturan cache ke header respons.
Namun, karena cache, penerapan segera mungkin tidak akan terjadi saat menyebarkan sumber daya seperti gambar. Dalam hal ini, Anda perlu membatalkan cache. Anda dapat mengubah nama file, menambahkan permintaan untuk membatalkan cache, atau menggunakan AWS CloudFront untuk menerapkan pembatalan cache.
Ada juga cara untuk menyimpan halaman yang dirender di server Nuxt ke cache memori.
Ini adalah caching sisi server, dan tidak hanya API tetapi seluruh halaman disimpan dalam cache. Dengan kata lain, halaman dimuat segera tanpa penundaan saat Anda menekan tombol kembali. Kinerja sangat baik, tetapi Anda harus berhati-hati karena menggunakan memori server.
Jika 10.000 pengguna meminta halaman yang sama,
Saat pengguna pertama meminta, halaman dirender dan disimpan dalam cache.
Setelah itu, ketika 9.999 pengguna mengakses halaman yang sama, server merespons dengan hasil yang telah di-cache.
-> Metode ini tidak baik jika Anda perlu menampilkan data yang dipersonalisasi untuk setiap pengguna.