Про Full Route Cache в Next.js

Это третий уровень кэширования, который сохраняет на диске целые HTML-страницы и RSC-payload. Каскадно связан с Data Cache: инвалидация Data Cache какого-то запроса приводит к инвалидации Full Route Cache (далее FRC) страниц, отправляющих этот запрос.

Как управлять?

1. Вызовы cookies(), headers() и fetch() с отключенным кэшированием (cache: 'no-store' или revalidate: 0) отключают FRC, 2. export const dynamic 2.1. auto — дефолтный вариант, кэш включен, если на странице не вызываются cookies(), headers() или fetch() с отключенным кэшем. 2.2. force-dynamic — отключает FRC. 2.3. force-static — держит FRC включенным даже если есть вызовы cookies() или headers() — они в этом случае возвращают пустые значения. 2.4. error — включает FRC, при обнаружении несовместимых с ним функций, упомянутых выше, сборка падает с ошибкой. 3. export const revalidate 3.1. false — кэширует навсегда, 3.2. 0 — отключает FRC (и Data Cache заодно), 3.3. 10 — хранит FRC 10 секунд и обновляет кэш по принципу stale-while-revalidate. 4. useSearchParams() — если оно используется на странице, то SSG не получится — при сборке будет ругань. Нужно либо вручную переводить на SSR либо обернуть компонент, вызывающий useSearchParams() в Suspense и тогда этот компонент будет пропущен при SSG и отрендерится уже в браузере.

Кстати, в прошлый раз мы пропустили одну ручку для управления Data Cache: export const fetchCache. Она позволяет глобально переопределять поведение всех fetch() на странице. Не буду ее подробно разбирать ибо не хочу.

FRC для динамических путей (/blog/[id])

  • Чтобы на сборке собрать сразу все странички, с динамическим сегментом, нужно описать в этом динамическом роуте функцию generateStaticParams() и вернуть из нее набор значений динамического сегмента роута. Next тогда сбилдит набор соответствующих страничек.
  • export const dynamicParams — флаг, разрешающий генерацию новых страниц в рантайме при получении нового неизвестного значения в динамическом сегменте. По дефолту включен.

Важное про generateStaticParams(): оно не смотрит на revalidate и не запускается в рантайме. Поэтому если у вас добавился новый пост в блоге — Next его не увидит. Для обхода этой проблемы как раз и придуман dynamicParams — он должен на ходу срендерить новую страничку и положить ее в FRC. Однако лично у меня это не проканало и я пока точно не знаю, почему (слишком много влияющих факторов и истинный сценарий отследить можно, но сложно, поэтому рассказывать буду только когда/если победю). В случае таких проблем можно просто отказаться от generateStaticParams и собирать странички в рантайме сохраняя их в кэш с помощью revalidate.

И конечно же здесь тоже актуальна проблема горизонтального масштабирования: у каждого инстанса будет свой независимый кэш, поэтому нам нужен кастомный cache handler, который мы скоро напишем в одном из следующих постов.

Про Full Route Cache в Next.js
Это третий уровень кэширования, который сохраняет на диске целые HTML-страницы и RSC-payload | Сетка — социальная сеть от hh.ru