Caching

Aturan-aturan ini mengidentifikasi pola yang melewati CDN dan caching ISR Vercel, memaksa rendering sisi server yang tidak perlu dan meningkatkan biaya komputasi.

Perilaku berbasis versi

Diagnosis caching menyesuaikan versi mayor Next.js yang terdeteksi:

• Next.js 15: peringatan menekankan bahwa fetch dan handler GET tidak di-cache secara default.
• Next.js 16+: peringatan memprioritaskan panduan Cache Components ("use cache", cache tags, targeted revalidation).
• Versi lain/tidak diketahui: peringatan menggunakan panduan kebijakan cache yang agnostik terhadap framework.

nextjs-no-side-effect-in-get-handler

Mendeteksi handler route GET yang mengandung efek samping (memodifikasi cookie, header, atau panggilan database) atau berada pada segmen route yang bermutasi seperti /logout, /signout, /delete, dll.

Mengapa ini penting: Permintaan GET dapat dipicu oleh prefetching dan rentan terhadap CSRF. Efek samping pada handler GET juga mencegah caching.

// app/api/logout/route.ts
export async function GET() {
  cookies().delete("session");
  return Response.json({ ok: true });
}

// app/api/logout/route.ts
export async function POST() {
  cookies().delete("session");
  return Response.json({ ok: true });
}

Segmen route bermutasi yang terdeteksi: logout, log-out, signout, sign-out, unsubscribe, delete, remove, revoke, cancel, deactivate.

vercel-no-force-dynamic

Mendeteksi halaman dengan export const dynamic = "force-dynamic".

Mengapa ini penting: force-dynamic memaksa rendering sisi server pada setiap permintaan, melewati caching halaman penuh sepenuhnya.

export const dynamic = "force-dynamic";

export default function Page() { ... }

export const revalidate = 3600;

export default function Page() { ... }

vercel-no-no-store-fetch

Mendeteksi panggilan fetch dengan cache: "no-store" atau revalidate: 0.

Mengapa ini penting: Opsi-opsi ini menonaktifkan caching sepenuhnya, meningkatkan bandwidth tanpa cache dan biaya komputasi pada setiap permintaan.

const data = await fetch(url, { cache: "no-store" });

const data = await fetch(url, {
  next: { revalidate: 3600 },
});

vercel-missing-cache-policy

Mendeteksi handler route GET tanpa konfigurasi cache eksplisit — tanpa header Cache-Control, tanpa export revalidate, dan tanpa export dynamic.

Mengapa ini penting: Tanpa kebijakan cache eksplisit, respons mungkin kehilangan peluang caching CDN, menyebabkan hit berulang ke origin.

export async function GET() {
  const data = await fetchData();
  return Response.json(data);
}

export const revalidate = 3600;

export async function GET() {
  const data = await fetchData();
  return Response.json(data);
}

vercel-prefer-get-static-props

Mendeteksi route Pages Router yang menggunakan getServerSideProps.

Mengapa ini penting: getServerSideProps berjalan pada setiap permintaan. Beralih ke getStaticProps (dengan ISR opsional) meng-cache halaman di CDN dan mengurangi komputasi server.

vercel-get-static-props-consider-isr

Mendeteksi getStaticProps tanpa nilai kembalian revalidate.

Mengapa ini penting: Tanpa revalidate, semua halaman dibangun saat waktu deploy. Untuk situs besar ini memperlambat build secara drastis. ISR menghasilkan halaman sesuai permintaan dan meng-cache-nya.

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 3600,
  };
}