ERLC-Russia-Site) для автоматической загрузки всех статических ресурсов (JavaScript-чанков, CSS-файлов, шрифтов и медиа) с собственного CDN (cdn.erlcrussia.com).
В результате основной сервер (erlcrussia.com) отдаёт исключительно начальный HTML и динамические API-запросы, а все ресурсы папки _next/static загружаются с CDN. В консоли разработчика браузера (F12, вкладка Network) запросы к папке _next на домене erlcrussia.com полностью отсутствуют.
Архитектура и Принцип Работы
Когда пользователь открывает страницу сайта на Next.js:- Браузер запрашивает HTML-документ у основного сервера:
GET https://erlcrussia.com/ru. - Сервер возвращает сгенерированный HTML (SSR). Внутри HTML находятся теги
<script>,<link rel="stylesheet">и предзагрузки шрифтов. - По умолчанию путь к чанкам выглядит как
/_next/static/chunks/main-app.js. Но при настройкеassetPrefixNext.js автоматически подставляет домен CDN: - Браузер начинает параллельно загружать скрипты и стили с
cdn.erlcrussia.com, снимая сетевую нагрузку и нагрузку на диск с основного Node.js-сервера.
Способы Доставки Чанков в CDN
Существует два надёжных подхода к организации работы CDN для Next.js:- 1. Origin Pull (Рекомендуемый)
- 2. CI/CD Pre-Upload в MinIO
Origin Pull (автоматическое подтягивание) — Edge-сервер CDN при первом запросе файла проверяет свой локальный кэш на SSD. Если файла нет, CDN сам запрашивает его у основного сайта (
erlcrussia.com), сохраняет в кэш и отдаёт клиенту.Преимущества:- Не требуется изменять скрипты деплоя или загружать гигабайты файлов перед стартом контейнера.
- При релизе новой версии сайта генерируются новые уникальные хэши файлов (например,
main-a82f.js). CDN мгновенно и прозрачно подтянет новые файлы при первом же открытии страницы пользователями. - Старые чанки продолжают работать у пользователей, которые ещё не обновили вкладку браузера.
Пошаговая Интеграция
1
Настройка next.config.js
В конфигурационном файле проекта фронтенда укажите параметр
assetPrefix. Рекомендуется включать его только в режиме production, чтобы во время локальной разработки (npm run dev) файлы отдавались локальным сервером:next.config.js
2
Настройка Origin Pull на Edge CDN Сервере (Nginx)
Если CDN работает через Nginx на Edge VPS, добавьте блок обработки пути
/_next/static/:/etc/nginx/sites-available/cdn.erlcrussia.com
3
Настройка CORS заголовков
Поскольку JavaScript-скрипты, CSS и шрифты загружаются с домена
cdn.erlcrussia.com на страницу erlcrussia.com, это междоменный запрос (Cross-Origin).Для корректной работы шрифтов (.woff2) и корректного сбора ошибок в Sentry/клиентских логах CDN обязан отдавать заголовок:4
Проверка в F12 DevTools
После развёртывания сборки откройте сайт
https://erlcrussia.com и выполните проверку:- Откройте панель разработчика (нажмите F12).
- Перейдите во вкладку Network (Сеть).
- Выберите фильтр JS или CSS.
- В колонке Domain убедитесь, что все файлы из
_next/static/chunks/загружаются с доменаcdn.erlcrussia.com. - Запросы к домену
erlcrussia.comдолжны содержать только начальный документ (document), вызовы/api/...и служебные запросы данных. Папки_nextна доменеerlcrussia.comв запросах браузера нет.
Кэширование и Заголовок immutable
Так как Next.js генерирует уникальные хэши в именах файлов для каждой сборки (например, pages-app-9c2b4e.js), содержимое конкретного URL никогда не изменяется.
- Рекомендуемый заголовок ответа CDN:
- Директива
immutableсообщает браузеру, что файл гарантированно статичен. Браузер даже при повторных переходах и принудительном обновлении страницы не будет отправлять304 Not Modifiedусловные запросы, загружая файл мгновенно из дискового кэша пользователя.
Часто Задаваемые Вопросы (FAQ)
Что происходит при выпуске нового релиза сайта?
Что происходит при выпуске нового релиза сайта?
Next.js создаст новые имена файлов с новыми хэшами. HTML-страница начнёт ссылаться на новые URL в CDN. CDN подтянет новые файлы при первом запросе, а старые файлы останутся в кэше CDN для пользователей, у которых сайт был открыт до релиза.
Что делать, если картинки из next/image не загружаются?
Что делать, если картинки из next/image не загружаются?
Убедитесь, что домен
cdn.erlcrussia.com указан в массиве images.remotePatterns в next.config.js. Также убедитесь, что SVG-файлы отдаются с заголовком Content-Type: image/svg+xml и Content-Disposition: inline.Влияет ли CDN на Server Side Rendering (SSR) и SEO?
Влияет ли CDN на Server Side Rendering (SSR) и SEO?
Нет, HTML формируется на стороне основного сервера и поисковые боты получают полноценную разметку. При этом ускорение отдачи статики напрямую улучшает метрики Core Web Vitals (LCP, FID, CLS) и повышает рейтинг сайта в поисковых системах.