Статическая генерация сайтов: сборка страниц и обновление

Прямой ответ

Статическая генерация формирует HTML при сборке, поэтому сервер отдаёт готовый файл без формирования разметки на каждый запрос.

build --output ./public     # генерация HTML при сборке
nginx: root /var/www/public # отдача готовых файлов

Файлы формируются один раз при сборке, поэтому обработка запроса сводится к отдаче файла без выполнения кода приложения. О рендеринге на сервере — в статье про SSR.

Момент генерации и отличие от SSR

Момент формирования разметки определяет нагрузку на сервер, поэтому статическая генерация переносит формирование в сборку.

Генерация при сборке. Разметка формируется до развёртывания, поэтому сервер не выполняет код приложения при запросе.

Формирование при запросе. Рендеринг на сервере собирает разметку для каждого запроса, поэтому нагрузка на сервер растёт с трафиком.

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

Практическое следствие: страница с содержимым, зависящим от пользователя, не генерируется статически, поскольку содержимое различается между запросами.

Отдельный аспект — объём сборки. Число генерируемых страниц определяет время сборки, поэтому сайт с большим числом страниц собирается дольше.

Доставка готовых страниц и кэш

Готовые файлы доставляются веб-сервером либо сетью доставки, поэтому обработка запроса не требует выполнения кода приложения.

Отдача файла. Веб-сервер отдаёт готовый файл, поэтому время обработки запроса минимально.

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

Заголовки кэша. Срок хранения файла задаётся заголовками, поэтому повторные запросы обслуживаются из кэша.

Практическое следствие: доставка готовых файлов через сеть доставки сокращает задержку, поскольку запрос не доходит до источника.

Обновление содержимого и пересборка

Изменение данных требует повторной генерации, поэтому содержимое обновляется пересборкой либо частичной перегенерацией страницы.

Полная пересборка. Все страницы генерируются заново, поэтому изменение отражается на всём сайте после сборки.

Частичная перегенерация. Отдельная страница генерируется после изменения данных, поэтому время обновления сокращается.

Допустимая задержка. Период между изменением данных и отражением в содержимом, поэтому требование к актуальности определяет способ обновления.

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

О выборе подхода — в статье про рендеринг: клиент против сервера; о метриках — в статье про Core Web Vitals.

Практика: настройка статической генерации

1. Генерируйте статически страницы с одинаковым содержимым. Сервер отдаёт готовый файл, поэтому код приложения не выполняется.

2. Оценивайте объём сборки по числу страниц. Время сборки растёт с числом генерируемых страниц.

3. Доставляйте файлы через сеть доставки. Задержка сокращается, поскольку запрос обслуживается узлом ближе к пользователю.

4. Задавайте срок хранения файлов заголовками кэша. Повторные запросы обслуживаются из кэша без обращения к источнику.

5. Используйте частичную перегенерацию при частом изменении данных. Время обновления страницы сокращается.

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

7. Не генерируйте статически персональные страницы. Содержимое различается между пользователями, поэтому требуется формирование при запросе.

Рекомендации:

1. Не применяйте статическую генерацию к часто меняющимся данным. Полная пересборка занимает время, превышающее допустимую задержку обновления.
2. Учитывайте время сборки при росте числа страниц. Большой объём генерации замедляет выпуск изменения.
3. Сопоставляйте срок кэша с частотой обновления содержимого. Длительный срок хранения отдаёт прежний файл после пересборки.
4. Фиксируйте измерение времени отдачи страницы. Влияние на загрузку подтверждается измерением.
5. Пересматриваем набор статических страниц при изменении структуры сайта. Новая страница требует оценки способа генерации.

Практический сценарий: обновление статьи отражалось на сайте с задержкой

Контекст: изменения в текстах появлялись на сайте через продолжительное время, при этом правки требовалось публиковать сразу.

1. Диагностика. Проверка показала, что любое изменение запускало полную пересборку всех страниц сайта. Число страниц выросло, поэтому время сборки превысило допустимую задержку обновления.
2. Причина. Способ обновления не соответствовал объёму сайта: полная пересборка выполнялась при изменении отдельной страницы.
3. Действия. (а) Заменили полную пересборку частичной перегенерацией изменённой страницы, чтобы время обновления сократилось; (б) настроили обновление кэша сети доставки для изменённой страницы, чтобы прежний файл не отдавался после перегенерации; (в) сократили срок хранения файлов заголовками кэша, чтобы обновление отражалось быстрее; (г) оставили полную пересборку для изменений, затрагивающих шаблон всех страниц; (д) измерили время от изменения до отражения на сайте и убедились в соответствии допустимой задержке.
4. Результат. Изменение отдельной страницы отражается на сайте в пределах допустимой задержки, поскольку выполняется перегенерация одной страницы.

Вывод: полная пересборка сайта при изменении отдельной страницы занимает время, растущее с числом страниц, поэтому обновление отражается с задержкой. Частичная перегенерация с обновлением кэша доставки сокращает время отражения изменения.

FAQ

Чем статическая генерация отличается от рендеринга на сервере? Разметка формируется при сборке, а не при запросе. Сервер отдаёт готовый файл без выполнения кода приложения.

Какие страницы нельзя генерировать статически? Страницы с содержимым, зависящим от пользователя. Содержимое различается между запросами, поэтому требуется формирование при запросе.

Как обновить содержимое статического сайта? Пересборкой всех страниц либо частичной перегенерацией изменённой страницы. Выбор определяется допустимой задержкой.

Что даёт доставка через сеть доставки? Файлы кэшируются на узлах ближе к пользователю, поэтому задержка сокращается и запрос не доходит до источника.

Источники: web.dev Rendering on the Web, RFC 9110 HTTP Semantics, RFC 9111 HTTP Caching — ссылки в шапке.