Автоматическая статическая оптимизация — это мощная функция, которая позволяет автоматически преобразовывать страницы в статический HTML, если они не запрашивают данные из внешних источников. Это устраняет необходимость в рендеринге на стороне сервера во время выполнения для страниц, которые полагаются только на данные на стороне клиента.

Как это работает

1. Анализ страниц: Во время сборки Next.js анализирует каждую страницу, чтобы определить, запрашивает ли она данные. Если нет, страница помечается для статической оптимизации. Это часто включает страницы, которые используют только внутреннее состояние, библиотеки на стороне клиента или контекст.
2. Предварительный рендеринг: Для страниц, помеченных как статические, Next.js генерирует HTML-файлы во время процесса сборки. Эти оптимизированные страницы затем обслуживаются без необходимости рендеринга на стороне сервера.
3. Периодическое обновление данных: Статические страницы могут содержать устаревшие данные. Next.js использует стратегию перегенерации для периодического обновления данных. Это идеальный компромисс для многих приложений, балансирующий производительность и актуальность данных.

Примеры использования

• Страницы с контентом: Идеально подходят для страниц с большим количеством контента, таких как блоги или маркетинговый контент, где данные не меняются часто, и небольшая задержка в обновлениях допустима.
• Маркетинговые кампании: Для рекламных кампаний или одноразовых событий, где не требуется реальное время данных, а быстрая начальная загрузка страницы является критически важной.

Кэширование и ограничения

• Кэш на стороне клиента: Поскольку отдельные пользователи могут получать кэшированные статические страницы, данные на стороне клиента могут устаревать. Техники, такие как инкрементальная статическая регенерация (ISR), обеспечивают лучшие гарантии свежести, обновляя страницы через заданные интервалы.
• Зависимости от данных: Страницы, зависящие от свежих внешних данных, нуждаются в рендеринге на стороне сервера или гибридном рендеринге. В противном случае они рискуют обслуживать устаревший контент.

Пример кода:

Использование getStaticProps и getServerSideProps

// pages/product/[id].jsx
 
// Использование getStaticProps для статической оптимизации
export async function getStaticProps({ params }) {
  const product = await someFetchFunction(params.id);
  return {
    props: { product },
    revalidate: 10, // Перегенерировать каждые 10 секунд для более обновленной страницы
  };
}
 
// Если требуется реальное время данных, используйте getServerSideProps
export async function getServerSideProps({ params }) {
  const product = await someFetchFunction(params.id);
  return { props: { product } };
}
 
function Product({ product }) {
  // Рендеринг деталей продукта
}

Этот пример демонстрирует, как можно использовать getStaticProps для статической оптимизации страницы, что позволяет Next.js генерировать статический HTML во время сборки. Если требуется реальное время данных, можно использовать getServerSideProps для рендеринга страницы на стороне сервера при каждом запросе.

Назад