Caching Next.js: Mengecas Turbo Apl Anda dengan Pengambilan Data yang Cekap

Caching dalam Next.js bukan sahaja tentang menjimatkan masa—ia mengenai mengurangkan permintaan rangkaian yang berlebihan, memastikan data segar dan menjadikan apl anda berprestasi seperti rockstar.
Sama ada anda cuba menyimpan data dicache lebih lama atau memuat semula data atas permintaan, Next.js memberikan anda semua alatan yang anda perlukan. Dalam artikel ini, kami akan membahagikan cara menggunakan caching dengan berkesan dalam Next.js

Next.js memanjangkan API pengambilan untuk memberi anda kuasa besar dalam hal caching. Dengan pilihan pengambilan mudah seperti cache: 'no-store' dan cache: 'force-cache', anda boleh mengawal dengan mudah bila dan cara data dicache.

Sentiasa Segar dengan cache: 'no-store' (Setara dengan unstable_noStore())

Mahukan data baharu setiap masa? cache: 'tiada-kedai' ialah yang perlu digunakan. Pilihan pengambilan ini melangkau cache sepenuhnya dan mengambil data terkini dengan setiap permintaan. Ia sesuai apabila anda memerlukan ketepatan masa nyata—tiada sisa daripada pengambilan semalam dibenarkan.

Nota: Anda juga boleh menggunakan unstable_noStore() jika anda ingin melangkau cache pada komponen pelayan. Sintaks mungkin berubah kemudian, jadi kekal dengan cache: 'no-store' untuk kestabilan.

Gunakan Semula Data dengan cache: 'force-cache' (Setara dengan unstable_cache())

Sebaliknya, jika anda boleh menggunakan data cache (fikirkan kandungan statik yang tidak selalu berubah), gunakan cache: 'force-cache'. Ia akan menyimpan respons untuk kegunaan masa hadapan dan melangkau permintaan rangkaian yang berlebihan.

Nota: unstable_cache() turut menyimpan cache data, tetapi menggunakan cache yang stabil: 'force-cache' adalah lebih dipercayai jika anda mengelak daripada kejutan.

Pastikan Ia Segar dengan Pengesahan Semula

Kadangkala data cache memerlukan muat semula—sama ada selepas masa tertentu atau apabila dicetuskan oleh peristiwa. Beruntung untuk anda, Next.js membolehkan anda mengesahkan semula data cache anda dalam beberapa cara.

Sahkan semula dengan Masa: next.revalidate

Jika data anda perlu dimuat semula secara berkala (seperti setiap jam atau hari), anda boleh menetapkan tempoh pengesahan semula menggunakan pilihan next.revalidate dalam permintaan pengambilan anda. Ia akan mengambil data terbaharu selepas masa yang anda tentukan sambil menyimpan perkara dicache sepanjang masa.

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

Pengesahan Semula Atas Permintaan dengan Teg: revalidateTag()

Sekarang, Bayangkan anda boleh memberitahu Next.js untuk memuat semula bit tertentu data cache apabila sesuatu yang penting berlaku—seperti penyerahan borang atau catatan blog baharu yang disiarkan secara langsung. Anda boleh menetapkan teg pada data cache anda, dan kemudian mengesahkan semula teg tersebut apabila diperlukan.

Dengan cara ini, anda boleh memuat semula bahagian cache anda secara manual atas permintaan tanpa menunggu pengesahan semula berjadual seterusnya.

Menggunakan Kaedah Tidak Stabil

Jika anda jenis pengembaraan, anda juga boleh menggunakan kaedah unstable_noStore() dan unstable_cache() secara langsung pada komponen pelayan untuk mengurus gelagat caching. Perlu diingat bahawa ini adalah "tidak stabil" atas sebab tertentu, jadi ia mungkin berubah pada masa hadapan(atau mungkin telah ditukar semasa anda membacanya).

Atau jika anda suka caching, berikut ialah cara anda boleh menggunakan unstable_cache():

Langkau Penggerudian Prop

Berikut ialah helah yang kemas: jika anda mengambil data yang sama merentas berbilang komponen (seperti Reka Letak, Halaman dan beberapa komponen dalam), jangan tekankan untuk mengambilnya sekali di bahagian atas dan menurunkannya atau perlu buat permintaan untuk data itu beberapa kali pada berbilang komponen yang menyebabkan prestasi melambatkan. Next.js secara automatik menghafal permintaan pengambilan semasa pemaparan pelayan, bermakna jika anda mengambil data yang sama beberapa kali, ia cukup bijak untuk hanya memukul rangkaian sekali dan berkongsi hasilnya dalam berbilang komponen.

Membungkusnya

Next.js memberi anda semua alatan yang anda perlukan untuk mengurus caching dengan berkesan, sama ada melalui pilihan API ambil seperti cache: 'no-store' dan cache: 'force-cache', atau kaedah unstable_noStore() dan unstable_cache() yang lebih eksperimen. Tambahkan strategi pengesahan semula seperti next.revalidate dan revalidateTag, dan anda mempunyai semua yang anda perlukan untuk memastikan data anda sentiasa segar tanpa perlu bersusah payah.

Sumber:
Next.js caching

Atas ialah kandungan terperinci Caching Next.js: Mengecas Turbo Apl Anda dengan Pengambilan Data yang Cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!