Bagaimana untuk Mengelakkan Isu Caching dalam Titik Akhir API Next.js 13.2?

Cara Menyelesaikan Isu Caching Data dalam Titik Akhir API Next.js 13.2

Apabila menggunakan aplikasi Next.js dengan titik akhir API yang mengambil data daripada sumber luaran, pembangun mungkin menghadapi isu di mana data cache dipaparkan secara konsisten, tanpa mengira perubahan yang dibuat pada sumber data asas. Tingkah laku ini boleh dikaitkan dengan mekanisme caching Next.js untuk Laluan API dan Komponen Pelayan dalam persekitaran pengeluaran.

Untuk menyelesaikan isu caching ini, Next.js menyediakan beberapa pilihan untuk mengawal gelagat caching.

Menggunakan Fetch() dengan Pilihan Pengesahan Semula atau Cache

Jika menggunakan fetch() untuk pengambilan data, pembangun boleh menentukan pilihan pengesahan semula atau cache untuk mengawal tingkah laku caching bagi setiap pertanyaan:

<code class="js">fetch('https://...', { next: { revalidate: 10 } });
// OR
fetch('https://...', { cache: 'no-store' });</code>

Pilihan pengesahan semula menentukan bilangan saat sebelum cache diambil semula. Pilihan cache membolehkan kawalan yang lebih berbutir, dengan nilai seperti no-store menghalang penyemak imbas daripada menyimpan cache respons.

Menggunakan Konfigurasi Segmen Laluan untuk Peraturan Caching Tersuai

Untuk kes di mana fetch() digunakan dengan peraturan caching tersuai atau apabila menggunakan perpustakaan seperti axios atau berinteraksi secara langsung dengan pangkalan data, pembangun boleh menggunakan Konfigurasi Segmen Laluan. Konfigurasi Segmen Laluan membenarkan untuk mentakrifkan gelagat caching berdasarkan setiap laluan:

<code class="js">// layout.js OR page.js OR route.js ??

import prisma from "./lib/prisma";

/*
  Bleow option is when you want no caching at all, there are more options
  on the doc depending on your needs. 
*/
export const dynamic = "force-dynamic";

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}</code>

Dengan menetapkan dinamik kepada "force-dynamic", Next.js melumpuhkan caching untuk laluan yang ditentukan. Pembangun boleh meneroka pilihan tambahan berdasarkan keperluan caching khusus mereka, seperti yang didokumenkan dalam dokumentasi Next.js.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Isu Caching dalam Titik Akhir API Next.js 13.2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!