Чем Next.js помогает в кэшировании

«Чем Next.js помогает в кэшировании» — вопрос из категории Библиотеки, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Next.js предоставляет встроенные механизмы кэширования для улучшения производительности:

  1. Статические страницы - при getStaticProps страницы генерируются на этапе сборки и кэшируются на CDN.

  2. Incremental Static Regeneration (ISR) - позволяет обновлять статический контент без полной пересборки:

export async function getStaticProps() {
  return {
    props: {...},
    revalidate: 60 // секунд
  }
}
  1. Кэширование API роутов - автоматическое кэширование ответов API при использовании getStaticProps/getServerSideProps.

  2. Image Optimization - встроенный компонент next/image кэширует оптимизированные изображения.

  3. Клиентский кэш - Next.js автоматически кэширует ресурсы (JS, CSS) с хешами в именах файлов.

  4. Server-side caching - при использовании getServerSideProps можно настроить заголовки Cache-Control.