Перейти к содержанию

Подготовка к продакшну

  • используйте кеширование (см. ниже) везде, где это возможно
  • убедитесь в том, что сервер и база данных находятся (развернуты) в одном регионе
  • минимизируйте количество JavaScript-кода
  • откладывайте загрузку "тяжелого" JS до момента его фактического использования
  • убедитесь в правильной настройке логирования
  • убедитесь в правильной обработке ошибок
  • настройте страницы 500 (ошибка сервера) и 404 (страница отсутствует)
  • убедитесь, что приложение отвечает лучшим критериям производительности
  • запустите Lighthouse для проверки производительности, лучших практик, доступности и поисковой оптимизации. Используйте производственную сборку и режим "Инкогнито" в браузере, чтобы ничто постороннее не влияло на результаты
  • убедитесь, что используемые в вашем приложении фичи поддерживаются современными браузерами

Для повышения производительности используйте следующее:

  • next/image и автоматическую оптимизацию изображений
  • автоматическую оптимизацию шрифтов
  • оптимизацию скриптов

Кеширование

Кеширование уменьшает время ответа и количество запросов к внешним сервисам. Next.js автоматически добавляет заголовки кеширования к иммутабельным ресурсам, доставляемым из _next/static, включая JS, CSS, изображения и другие медиа.

1
Cache-Control: public, max-age=31536000, immutable

Для ревалидации кеша страницы, которая была предварительно отрендерена в статическую разметку, используется настройка revalidate в функции getStaticProps.

Обратите внимание: запуск приложения в режиме разработки с помощью next dev отключает кеширование.

1
Cache-Control: no-cache, no-store, max-age=0, must-revalidate

Заголовки кеширования также можно использовать в getServerSideProps и интерфейсе маршрутизации для динамических ответов. Пример использования stale-while-revalidate:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// Значение считается свежим в течение 10 сек (s-maxage=10).
// Если запрос повторяется в течение 10 сек, предыдущее кешированное значение
// считается свежим. Если запрос повторяется в течение 59 сек,
// кешированное значение считается устаревшим, но все равно используется для рендеринга
// (stale-while-revalidate=59)
// После этого запрос выполняется в фоновом режиме и кеш заполняется свежими данными.
// После обновления на странице будут отображаться новое значение
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  );

  return {
    props: {},
  };
}

Уменьшение количества используемого JavaScript

Для определения того, что включается в каждый JS-бандл можно воспользоваться следующими инструментами:

  • Import Cost — расширение для VSCode, показывающее размер импортируемого пакета
  • Package Phobia — сервис для определения "стоимости" добавления в проект новой зависимости для разработки (dev dependency)
  • Bundle Phobia — сервис для определения того, насколько добавление зависимости увеличит размер сборки
  • Webpack Bundle Analyzer — Webpack-плагин для визуализации сборки в виде интерактивной, масштабируемой древовидной структуры

Каждый файл в директории pages выделяется в отдельную сборку в процессе выполнения команды next build. Для ленивой загрузки компонентов и библиотек можно использовать динамический импорт.

Комментарии