Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa Laluan API Next.js saya memulangkan data cache pada penggunaan Vercel?

Mengapa Laluan API Next.js saya memulangkan data cache pada penggunaan Vercel?

Barbara Streisand
Barbara Streisandasal
2024-11-02 21:11:30770semak imbas

Why is my Next.js API Route returning cached data on Vercel deployment?

Isu Cache Data Laluan API Next.js pada Vercel Deployment

Dalam aplikasi Next.js v13.2, titik akhir API mengambil data daripada pangkalan data menemui gelagat pelik selepas penggunaan pada Vercel. Respons yang sama dikembalikan secara konsisten, mencadangkan isu caching.

Punca Punca:

Secara lalai, Next.js menyimpan cache semua data yang diambil dalam Laluan API dan Komponen Pelayan dihidupkan pengeluaran. Apabila permintaan dibuat kepada laluan API, data yang dicache dihidangkan dan bukannya mengambil data baharu daripada pangkalan data.

Penyelesaian:

1. Kawalan Cache Per-Query dengan fetch()

Jika menggunakan API fetch(), anda boleh mengatasi gelagat caching lalai dengan menentukan pilihan pengesahan semula atau cache:

  • sahkan semula: Menentukan tempoh cache dalam saat sebelum mengambil semula data.
  • cache: Menetapkan gelagat cache secara eksplisit, pilihan termasuk:

    • no-store: Melumpuhkan cache sepenuhnya.
    • tiada cache: Mengesahkan semula cache sebelum menyampaikan respons.
    • muat semula: Sentiasa ambil data baharu daripada pelayan.

Contoh:

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

2. Konfigurasi Segmen Laluan untuk Caching Umum

Jika anda tidak menggunakan fetch() atau perlu mengawal caching pada peringkat segmen laluan, gunakan Konfigurasi Segmen Laluan:

  • Tambah SEGMEN DINAMIK: Tambah export const dynamic = "force-dynamic"; ke susun atur, halaman atau fail laluan anda. Ini melumpuhkan gelagat cache untuk segmen itu.

Contoh:

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

import prisma from "./lib/prisma";

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>

Atas ialah kandungan terperinci Mengapa Laluan API Next.js saya memulangkan data cache pada penggunaan Vercel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn