Vercel Doctor

Caching

Regole che rilevano pattern che impediscono un caching efficace su Vercel.

Queste regole identificano pattern che aggirano il CDN e il caching ISR di Vercel, forzando rendering lato server non necessario e aumentando i costi di calcolo.

Comportamento in base alla versione

Le diagnosi di caching si adattano alla versione major di Next.js rilevata:

  • Next.js 15: gli avvisi sottolineano che fetch e gli handler GET non sono memorizzati nella cache per impostazione predefinita.
  • Next.js 16+: gli avvisi danno priorità alla guida su Cache Components ("use cache", cache tag, revalidation mirata).
  • Altre/versioni sconosciute: gli avvisi usano una guida sulle policy di cache indipendente dal framework.

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

Error · vercel-doctor/nextjs-no-side-effect-in-get-handler

Rileva handler di route GET che contengono effetti collaterali (modifica di cookie, header o chiamate al database) o che si trovano su segmenti di route mutanti come /logout, /signout, /delete, ecc.

Perché è importante: Le richieste GET possono essere attivate dal prefetching e sono vulnerabili al CSRF. Gli effetti collaterali negli handler GET impediscono anche il caching.

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

Segmenti di route mutanti rilevati: logout, log-out, signout, sign-out, unsubscribe, delete, remove, revoke, cancel, deactivate.


vercel-no-force-dynamic

Warning · vercel-doctor/vercel-no-force-dynamic

Rileva pagine con export const dynamic = "force-dynamic".

Perché è importante: force-dynamic forza il rendering lato server ad ogni richiesta, aggirando completamente il caching dell'intera pagina.

Bad
export const dynamic = "force-dynamic";

export default function Page() { ... }
Good
export const revalidate = 3600;

export default function Page() { ... }

vercel-no-no-store-fetch

Warning · vercel-doctor/vercel-no-no-store-fetch

Rileva chiamate fetch con cache: "no-store" o revalidate: 0.

Perché è importante: Queste opzioni disabilitano completamente il caching, aumentando la larghezza di banda non cachata e i costi di calcolo ad ogni richiesta.

Bad
const data = await fetch(url, { cache: "no-store" });
Good
const data = await fetch(url, {
  next: { revalidate: 3600 },
});

vercel-missing-cache-policy

Warning · vercel-doctor/vercel-missing-cache-policy

Rileva handler di route GET senza alcuna configurazione esplicita di cache — nessun header Cache-Control, nessun export revalidate e nessun export dynamic.

Perché è importante: Senza una policy di cache esplicita, le risposte possono perdere opportunità di caching CDN, causando ripetuti hit all'origine.

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

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

vercel-prefer-get-static-props

Warning · vercel-doctor/vercel-prefer-get-static-props

Rileva route del Pages Router che usano getServerSideProps.

Perché è importante: getServerSideProps viene eseguito ad ogni richiesta. Passare a getStaticProps (con ISR opzionale) permette di cachare le pagine sul CDN e riduce il calcolo lato server.


vercel-get-static-props-consider-isr

Warning · vercel-doctor/vercel-get-static-props-consider-isr

Rileva getStaticProps senza un valore di ritorno revalidate.

Perché è importante: Senza revalidate, tutte le pagine vengono generate al momento del deploy. Per siti di grandi dimensioni questo rallenta drasticamente le build. ISR genera le pagine su richiesta e le mette in cache.

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

Last updated on

On this page