Caching

Diese Regeln identifizieren Muster, die den CDN- und ISR-Cache von Vercel umgehen und unnötiges Server-Side-Rendering sowie höhere Compute-Kosten erzwingen.

Versionsabhängiges Verhalten

Caching-Diagnosen passen sich an die erkannte Next.js-Hauptversion an:

• Next.js 15: Warnungen betonen, dass fetch und GET-Handler standardmäßig nicht gecacht sind.
• Next.js 16+: Warnungen priorisieren Hinweise zu Cache Components ("use cache", Cache-Tags, gezielte Revalidierung).
• Andere/unbekannte Versionen: Warnungen verwenden framework-agnostische Hinweise zu Cache-Richtlinien.

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

Erkennt GET-Route-Handler, die Side Effects enthalten (Cookie-/Header-Mutationen oder Datenbankaufrufe) oder auf mutierenden Routensegmenten wie /logout, /signout, /delete etc. liegen.

Warum es wichtig ist: GET-Requests können durch Prefetching ausgelöst werden und sind anfällig für CSRF. Side Effects in GET-Handlern verhindern außerdem 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 });
}

Erkannte mutierende Routensegmente: logout, log-out, signout, sign-out, unsubscribe, delete, remove, revoke, cancel, deactivate.

vercel-no-force-dynamic

Erkennt Seiten mit export const dynamic = "force-dynamic".

Warum es wichtig ist: force-dynamic erzwingt Server-Side-Rendering bei jedem Request und umgeht damit vollständig das Full-Page-Caching.

export const dynamic = "force-dynamic";

export default function Page() { ... }

export const revalidate = 3600;

export default function Page() { ... }

vercel-no-no-store-fetch

Erkennt Fetch-Aufrufe mit cache: "no-store" oder revalidate: 0.

Warum es wichtig ist: Diese Optionen deaktivieren Caching vollständig und erhöhen ungecachte Bandbreite sowie Compute-Kosten bei jedem Request.

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

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

vercel-missing-cache-policy

Erkennt GET-Route-Handler ohne explizite Cache-Konfiguration — keine Cache-Control-Header, kein revalidate-Export und kein dynamic-Export.

Warum es wichtig ist: Ohne explizite Cache-Policy können Responses CDN-Caching-Chancen verpassen und wiederholte Origin-Hits verursachen.

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

Erkennt Pages-Router-Routen mit getServerSideProps.

Warum es wichtig ist: getServerSideProps läuft bei jedem Request. Ein Wechsel zu getStaticProps (mit optionalem ISR) cached Seiten im CDN und reduziert Server-Compute.

vercel-get-static-props-consider-isr

Erkennt getStaticProps ohne Rückgabewert revalidate.

Warum es wichtig ist: Ohne revalidate werden alle Seiten beim Deploy gebaut. Bei großen Sites verlangsamt das Builds erheblich. ISR generiert Seiten on-demand und cached sie.

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