Cara Meng-cache Respons API + Peng-cache-an Halaman Web

Anda pasti sering mengalami hal ini: ketika menekan tombol "Kembali" di situs web, halaman yang sudah dimuat sebelumnya dimuat ulang.

Misalnya, di situs belanja online, setelah Anda mengklik produk yang muncul dalam hasil pencarian, lalu menekan tombol "Kembali",

pencarian dilakukan ulang.

Mengingat halaman yang sudah dimuat harus dimuat ulang, hal ini tidak hanya buruk untuk UX, tetapi juga menimbulkan masalah yang lebih besar dari segi sistem.

Memuat ulang halaman menyebabkan pemanggilan API yang tidak perlu dan meningkatkan trafik.

Hal ini dapat menyebabkan masalah biaya, dan jika Anda mengumpulkan data di halaman tersebut, akan terjadi pengumpulan data tertentu secara berlebihan.

Untuk mengatasi hal ini, Anda dapat memperoleh hasil yang signifikan dengan melakukan caching halaman atau hasil API.

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. Dapat disimpan secara asinkron dan merupakan NoSql. Gambar dan video juga dapat disimpan. Kapasitas maksimum bervariasi tergantung 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 melakukan caching komponen.

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 langsung mungkin tidak mungkin terjadi ketika menyebarkan sumber daya seperti gambar. Dalam kasus seperti itu, Anda perlu menonaktifkan cache. Anda dapat mengubah nama file, menambahkan permintaan untuk menonaktifkan cache, atau menggunakan AWS CloudFront untuk menonaktifkan cache.

Ada juga cara untuk menyimpan halaman yang dirender di server Nuxt di cache memori.

Ini adalah caching sisi server, dan tidak hanya API tetapi seluruh halaman di-cache. Dengan kata lain, halaman dimuat segera tanpa penundaan ketika Anda menekan tombol "Kembali". Kinerjanya 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 di-cache.

Setelah itu, ketika 9.999 pengguna mengakses halaman yang sama, server merespons dengan hasil yang di-cache.

-> Metode ini tidak baik jika Anda perlu menampilkan data yang dipersonalisasi untuk setiap pengguna.

+ cache secara internal menggunakan paket lru-cache.

* lru: Algoritma caching yang memprioritaskan penghapusan data yang paling lama tidak digunakan.

Ini menggunakan struktur data hash map atau double linked list untuk menemukan key-value dengan cepat: kompleksitas waktu O(1)