Vercel Doctor

Кешування

Правила, що виявляють патерни, які перешкоджають ефективному кешуванню на Vercel.

Ці правила виявляють патерни, що обходять кешування CDN та ISR Vercel, змушуючи виконувати непотрібний серверний рендеринг і збільшуючи витрати на обчислення.

Поведінка з урахуванням версії

Діагностика кешування підлаштовується під виявлену мажорну версію Next.js:

  • Next.js 15: попередження наголошують, що fetch і GET-обробники за замовчуванням не кешуються.
  • Next.js 16+: попередження надають пріоритет рекомендаціям щодо Cache Components ("use cache", теги кешу, цільова ревалідація).
  • Для інших/невідомих версій: попередження використовують незалежні від фреймворку рекомендації щодо політик кешування.

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

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

Виявляє GET-обробники маршрутів, що містять побічні ефекти (зміна cookies, заголовків або виклики бази даних) або знаходяться на мутуючих сегментах маршруту, як-от /logout, /signout, /delete тощо.

Чому це важливо: GET-запити можуть бути ініційовані попереднім завантаженням і вразливі до CSRF. Побічні ефекти в GET-обробниках також перешкоджають кешуванню.

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 });
}

Виявлені мутуючі сегменти маршруту: logout, log-out, signout, sign-out, unsubscribe, delete, remove, revoke, cancel, deactivate.


vercel-no-force-dynamic

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

Виявляє сторінки з export const dynamic = "force-dynamic".

Чому це важливо: force-dynamic примусово виконує серверний рендеринг при кожному запиті, повністю обходячи кешування повної сторінки.

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

Виявляє виклики fetch з cache: "no-store" або revalidate: 0.

Чому це важливо: Ці параметри повністю вимикають кешування, збільшуючи некешовану пропускну здатність та витрати на обчислення при кожному запиті.

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

Виявляє GET-обробники маршрутів без явної конфігурації кешування — без заголовків Cache-Control, без експорту revalidate та без експорту dynamic.

Чому це важливо: Без явної політики кешування відповіді можуть втрачати можливості кешування CDN, спричиняючи повторні запити до сервера.

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

Виявляє маршрути Pages Router, що використовують getServerSideProps.

Чому це важливо: getServerSideProps виконується при кожному запиті. Перехід на getStaticProps (з опціональним ISR) кешує сторінки на CDN та зменшує серверні обчислення.


vercel-get-static-props-consider-isr

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

Виявляє getStaticProps без значення revalidate у поверненні.

Чому це важливо: Без revalidate всі сторінки генеруються під час збірки. Для великих сайтів це суттєво сповільнює збірку. ISR генерує сторінки на вимогу та кешує їх.

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

Last updated on

On this page