Strategi Caching Edge untuk Aplikasi React

Header respons Cache-Control mengatur berapa lama Cloudflare (dan CDN lainnya) menyimpan respons SSR Anda dalam tembolok. Direktif utamanya adalah: max-age (tembolok peramban), s-maxage (durasi tembolok CDN bersama), dan stale-while-revalidate (menyajikan konten lama saat memvalidasinya kembali di latar belakang).

s-maxage dipatuhi oleh tembolok bersama (CDN), sedangkan max-age ditujukan untuk tembolok peramban. Untuk halaman SSR, biasanya Anda menginginkan s-maxage=60 (CDN menyimpan tembolok selama 60 detik) dan max-age=0 (peramban selalu melakukan validasi ulang), sehingga semua pengguna mendapatkan konten yang cukup baru dari tembolok edge.

Menambahkan stale-while-revalidate=30 ke header Cache-Control memberi tahu Cloudflare untuk langsung menyajikan halaman yang tersimpan dalam tembolok sambil mengambil versi terbaru di latar belakang. Pengguna selalu mendapatkan respons yang cepat; batas maksimum data lamanya adalah s-maxage + stale-while-revalidate detik.

Konten yang dipersonalisasi (berdasarkan sesi pengguna atau lokal) tidak boleh disajikan dari tembolok bersama kepada pengguna yang salah. Header Vary: Cookie memberi tahu Cloudflare untuk memperlakukan setiap nilai Cookie yang unik sebagai entri tembolok terpisah, sehingga data pengguna yang salah tidak disajikan kepada pengguna lain.

Pola yang umum adalah memeriksa cookie sesi di Worker sebelum memutuskan apakah akan menggunakan tembolok. Jika cookie sesi ada, lewati tembolok sepenuhnya dan render respons yang dipersonalisasi. Jika tidak ada cookie sesi, halaman tersebut bersifat publik dan dapat disajikan dari tembolok.

Cloudflare KV adalah penyimpanan kunci-nilai yang didistribusikan secara global dan menyimpan data dekat dengan pengguna. Anda dapat menyimpan HTML hasil render dalam tembolok KV — simpan halaman hasil render sebagai nilai dengan TTL, dan permintaan berikutnya membaca dari KV di edge, bukan merender ulang dengan React.

Pembacaan KV cepat karena data direplikasi ke PoP edge yang melayani permintaan — latensi pembacaan umumnya kurang dari 5 md. Namun, penulisan KV menggunakan konsistensi eventual: penulisan di satu wilayah disebarkan ke semua PoP global dalam 60 detik, sehingga sebagian pengguna mungkin melihat data lama untuk sementara.

Cloudflare R2 adalah layanan penyimpanan objek yang kompatibel dengan S3 dan tidak mengenakan biaya keluaran data. Layanan ini cocok untuk aset yang lebih besar dan tidak sesuai disimpan di KV: modul WASM, gambar OG yang telah dirender sebelumnya, serta set data JSON berukuran besar. Workers mengakses R2 melalui pengikatan, sama seperti KV.

Cloudflare Enterprise mendukung tag tembolok: Anda memberi respons tag Cache-Tag: product-42, lalu ketika produk 42 berubah, Anda memanggil antarmuka Cloudflare untuk menghapus semua respons yang diberi tag product-42. Dengan demikian, Anda dapat melakukan invalidasi tembolok secara tepat tanpa menghapus seluruh tembolok.

Saat menerapkan versi baru Worker, HTML yang sudah tersimpan dalam tembolok mungkin masih merujuk ke nama berkas bundel JS lama. Strategi yang kuat adalah menyertakan versi penerapan dalam kunci tembolok, atau menggunakan nama berkas bundel berversi (melalui hashing konten Vite), sehingga HTML lama selalu merujuk ke berkas JS yang valid dan tersimpan dalam tembolok.

Worker yang menyimpan HTML SSR dalam tembolok KV mengikuti pola berikut: hitung kunci tembolok dari URL (dan, bila perlu, lokal), periksa KV untuk menemukan entri, lalu segera kembalikan HTML yang tersimpan jika ditemukan. Jika tidak ditemukan, render dengan React, simpan hasilnya dalam KV dengan TTL, lalu kembalikan HTML yang baru dirender.

Model konsistensi apa yang digunakan Cloudflare KV untuk penulisan?

Penembolokan edge untuk aplikasi React menggunakan beberapa strategi: s-maxage Cache-Control untuk menembolok halaman publik di CDN, Vary: Cookie untuk mencegah respons yang dipersonalisasi dibagikan, KV untuk HTML hasil render yang disimpan di edge, serta tag tembolok untuk invalidasi yang terperinci. Model konsistensi eventual KV berarti penyebaran penulisan memerlukan waktu hingga 60 detik — rancang TTL dan strategi invalidasi Anda dengan mempertimbangkan hal ini.