Чек-лист для продакшена

Перед тем как вывести ваше Next.js приложение в продакшен, следует рассмотреть ряд оптимизаций и паттернов, которые помогут обеспечить наилучший пользовательский опыт, производительность и безопасность.

На этой странице представлены лучшие практики, которые можно использовать в качестве справочника при разработке приложения, перед выводом в продакшен и после развертывания, а также автоматические оптимизации Next.js, о которых следует знать.

Автоматические оптимизации

Эти оптимизации Next.js включены по умолчанию и не требуют дополнительной настройки:

• Серверные компоненты (Server Components): Next.js по умолчанию использует серверные компоненты. Они выполняются на сервере и не требуют JavaScript для рендеринга на клиенте, что не влияет на размер клиентских JavaScript-бандлов. Для интерактивности можно использовать клиентские компоненты (Client Components).
• Разделение кода (Code-splitting): Серверные компоненты позволяют автоматически разделять код по сегментам маршрутов. Также можно использовать ленивую загрузку (lazy loading) клиентских компонентов и сторонних библиотек, где это уместно.
• Предзагрузка (Prefetching): Когда ссылка на новый маршрут попадает в область видимости пользователя, Next.js предзагружает маршрут в фоновом режиме, что делает навигацию практически мгновенной. При необходимости можно отключить предзагрузку.
• Статический рендеринг (Static Rendering): Next.js рендерит серверные и клиентские компоненты на сервере во время сборки и кэширует результат для повышения производительности. Для отдельных маршрутов можно использовать динамический рендеринг (Dynamic Rendering).
• Кэширование (Caching): Next.js кэширует запросы данных, результаты рендеринга серверных и клиентских компонентов, статические ресурсы и другое, чтобы уменьшить количество запросов к серверу, базе данных и бэкенд-сервисам. При необходимости кэширование можно отключить.

Эти настройки по умолчанию направлены на повышение производительности приложения и уменьшение объема передаваемых данных при каждом сетевом запросе.

Во время разработки

При разработке приложения рекомендуется использовать следующие функции для обеспечения наилучшей производительности и пользовательского опыта:

Маршрутизация и рендеринг

• Макеты (Layouts): Используйте макеты для совместного использования UI между страницами и включения частичного рендеринга (partial rendering) при навигации.
• Компонент <Link>: Используйте компонент <Link> для клиентской навигации и предзагрузки.
• Обработка ошибок (Error Handling): Грамотно обрабатывайте все ошибки (catch-all errors) и 404 ошибки в продакшене, создавая кастомные страницы ошибок.
• Паттерны композиции (Composition Patterns): Следуйте рекомендуемым паттернам композиции для серверных и клиентских компонентов и проверяйте расположение ваших "use client" границ, чтобы избежать неоправданного увеличения клиентского JavaScript-бандла.
• Динамические функции (Dynamic Functions): Учитывайте, что динамические функции, такие как cookies() и проп searchParams, переведут весь маршрут в динамический рендеринг (Dynamic Rendering) (или всё приложение, если они используются в корневом макете (Root Layout)). Убедитесь, что использование динамических функций осознанно, и при необходимости оборачивайте их в <Suspense> границы.

Полезно знать: Частичный предварительный рендеринг (Partial Prerendering) (Экспериментально) позволит частям маршрута быть динамическими без перевода всего маршрута в динамический рендеринг.

Загрузка данных и кэширование

• Серверные компоненты (Server Components): Используйте преимущества загрузки данных на сервере с помощью серверных компонентов.
• Обработчики маршрутов (Route Handlers): Используйте обработчики маршрутов для доступа к бэкенд-ресурсам из клиентских компонентов. Но не вызывайте обработчики маршрутов из серверных компонентов, чтобы избежать дополнительных серверных запросов.
• Стриминг (Streaming): Используйте загрузочный UI и React Suspense для постепенной отправки UI с сервера на клиент, предотвращая блокировку всего маршрута во время загрузки данных.
• Параллельная загрузка данных (Parallel Data Fetching): Уменьшайте водопады запросов, загружая данные параллельно, где это уместно. Также рассмотрите возможность предзагрузки данных (preloading data) в соответствующих случаях.
• Кэширование данных (Data Caching): Проверьте, кэшируются ли ваши запросы данных, и при необходимости включите кэширование. Убедитесь, что запросы, не использующие fetch, кэшируются.
• Статические изображения (Static Images): Используйте директорию public для автоматического кэширования статических ресурсов приложения, например изображений.

UI и доступность

• Формы и валидация (Forms and Validation): Используйте серверные действия (Server Actions) для обработки отправки форм, валидации на сервере и обработки ошибок.

• Модуль шрифтов (Font Module): Оптимизируйте шрифты с помощью модуля шрифтов, который автоматически размещает ваши файлы шрифтов вместе с другими статическими ресурсами, удаляет внешние сетевые запросы и уменьшает сдвиг макета (layout shift).
• Компонент <Image>: Оптимизируйте изображения с помощью компонента Image, который автоматически оптимизирует изображения, предотвращает сдвиг макета и обслуживает их в современных форматах, таких как WebP или AVIF.
• Компонент <Script>: Оптимизируйте сторонние скрипты с помощью компонента Script, который автоматически откладывает скрипты и предотвращает их блокировку основного потока.
• ESLint: Используйте встроенный плагин eslint-plugin-jsx-a11y для раннего выявления проблем с доступностью.

Безопасность

• Загрязнение данных (Tainting): Предотвращайте раскрытие чувствительных данных клиенту, помечая данные и/или конкретные значения как загрязненные.
• Серверные действия (Server Actions): Убедитесь, что пользователи авторизованы для вызова серверных действий. Ознакомьтесь с рекомендуемыми практиками безопасности.

• Переменные окружения (Environment Variables): Убедитесь, что ваши файлы .env.* добавлены в .gitignore, и только публичные переменные имеют префикс NEXT_PUBLIC_.
• Политика безопасности контента (Content Security Policy): Рассмотрите возможность добавления политики безопасности контента для защиты вашего приложения от различных угроз, таких как межсайтовый скриптинг, кликджекинг и другие атаки с внедрением кода.

Метаданные и SEO

• API метаданных (Metadata API): Используйте API метаданных для улучшения поисковой оптимизации (SEO) вашего приложения, добавляя заголовки страниц, описания и другое.
• Open Graph (OG) изображения: Создавайте OG изображения для подготовки вашего приложения к публикации в соцсетях.
• Карты сайта (Sitemaps) и Robots: Помогите поисковым системам сканировать и индексировать ваши страницы, генерируя карты сайта и файлы robots.

Типобезопасность

• TypeScript и TS плагин: Используйте TypeScript и плагин TypeScript для улучшения типобезопасности и раннего выявления ошибок.

Перед выводом в продакшен

Перед выводом в продакшен можно выполнить next build для локальной сборки приложения и выявления ошибок сборки, а затем запустить next start для измерения производительности приложения в среде, приближенной к продакшену.

Core Web Vitals

• Lighthouse: Запустите Lighthouse в режиме инкогнито, чтобы лучше понять, как пользователи будут взаимодействовать с вашим сайтом, и выявить области для улучшения. Это симулированный тест, который следует дополнять полевыми данными (например, Core Web Vitals).

• Хук useReportWebVitals: Используйте этот хук для отправки данных Core Web Vitals в инструменты аналитики.

Анализ бандлов

Используйте плагин @next/bundle-analyzer для анализа размера ваших JavaScript-бандлов и выявления крупных модулей и зависимостей, которые могут влиять на производительность приложения.

Дополнительно следующие инструменты помогут вам понять влияние добавления новых зависимостей в ваше приложение:

• Import Cost
• Package Phobia
• Bundle Phobia
• bundlejs

После развертывания

В зависимости от места развертывания вашего приложения у вас могут быть доступны дополнительные инструменты и интеграции для мониторинга и улучшения производительности приложения.

Для развертываний на Vercel рекомендуем следующее:

• Аналитика: Встроенная панель аналитики для понимания трафика вашего приложения, включая количество уникальных посетителей, просмотры страниц и другое.
• Speed Insights: Реальные данные о производительности на основе данных посетителей, предлагающие практический взгляд на то, как ваш сайт работает в реальных условиях.
• Логирование: Логи выполнения и активности для отладки проблем и мониторинга приложения в продакшене. Также см. страницу интеграций для списка сторонних инструментов и сервисов.

Полезно знать:

Для получения всестороннего понимания лучших практик развертывания в продакшене на Vercel, включая детальные стратегии улучшения производительности сайта, обратитесь к чек-листу Vercel для продакшена.

Следование этим рекомендациям поможет вам создать более быстрое, надежное и безопасное приложение для ваших пользователей.