Здесь мы анализируем различные типы предварительного рендеринга веб-сайта и его сочетание с CDN.
Генерация статических сайтов
Каждая отдельная страница сайта сначала создается, а затем загружается в CDN. Самое лучшее в этом то, что, поскольку сайт статичен, пользователю не нужно взаимодействовать с сервером. CDN может напрямую возвращать статически созданный сайт, поэтому пользователь получает быстрый ответ.
Недостатком является то, что каждый раз, когда вы хотите обновить сайт, вам придется создавать весь сайт заново и загружать его в CDN. Это стоит денег.
Рендеринг на стороне сервера без CDN
При использовании рендеринга на стороне сервера страницы создаются по требованию. Когда пользователь запрашивает страницу, ему приходится ждать, пока страница будет создана и возвращена с сервера. Из-за этого время отклика замедляется.
При каждом посещении страницы происходит ее сборка. По сравнению со статической генерацией сайта, где всегда создается каждая страница, здесь создаются только те страницы, которые посещаются. Если страницу никто не посещает, она никогда не создается.
Недостатком является то, что для каждого запроса мы должны создавать страницу.
Рендеринг на стороне сервера с CDN
В этом случае первый посетитель страницы запрашивает ее в CDN, а CDN запрашивает ее на сервер, который создает ее и возвращает обратно. Но для второго посетителя CDN уже будет иметь страницу в кэше и может напрямую вернуть ее без создания новой сборки.
Проблема здесь в том, что каждый следующий посетитель будет получать сборку, которая была сгенерирована для первого посетителя. Что произойдет, если страница устарела?
С помощью max-age мы можем контролировать, как долго страница может находиться в кэше. Если страница устарела, CDN будет запрашивать новую сборку при следующем запросе через max-age. В зависимости от типа страницы мы можем установить другое значение max-age.
Мы можем комбинировать max-age с s-maxage. CDN будет кэшировать страницу, используя s-maxage вместо max-age, если он присутствует. Браузер пользователя будет игнорировать s-maxage. Это может быть очень полезно, если мы очищаем страницы сайта в CDN, когда они перестраиваются.
Поскольку мы не можем контролировать браузер пользователя, мы должны установить max-age, который меньше, чем s-maxage, иначе у нас может быть обновленная версия страницы в CDN, которую пользователь никогда не запросит, потому что в браузере пользователя есть старая версия, которая все еще действительна согласно max-age.
Например, мы можем установить max-age в одну минуту или один день и s-maxage в один год. Таким образом, пользователь будет часто запрашивать страницу в CDN, а CDN никогда не будет запрашивать новую сборку, потому что согласно s-maxage страница все еще будет действительна. Мы обновляем кэш на CDN, очищая предыдущую страницу и загружая новую.
Инкрементная регенерация статического сайта
Первоначально создается весь сайт и загружается в CDN, как и при генерации статического сайта. Но здесь, если пользователь запрашивает страницу, CDN возвращает текущую кэшированную страницу, а также запрашивает на сервере новую сборку только этой страницы. Таким образом, следующий пользователь получит новую сборку, а CDN снова запросит новую сборку на сервере.
Каждый пользователь получает быстрый ответ, и обновляются только те страницы, которые были запрошены.
Эта техника используется в Next.js, я рекомендую прочитать их документацию, чтобы лучше понять ее.
Рендеринг на стороне сервера с использованием Stale While Revalidate
stale-while-revalidate может быть добавлен к заголовку cache-control. Что это делает? Если запрос приходит после max-age, CDN возвращает устаревшую версию страницы, пока сервер создает свежую. stale-while-revalidate определяет в секундах, в течение какого времени может быть возвращена устаревшая версия.
При первом запросе страницы пользователем она будет сгенерирована на сервере и загружена в CDN. Если новый запрос приходит до max-age, то CDN просто вернет его. Если запрос приходит после max-age, то CDN вернет устаревшую версию, но на этот раз запросит у сервера новую свежую копию. Каждый пользователь, который запросит страницу, пока она находится в процессе создания, получит устаревшую версию.
Если после max-age придет запрос и stale-while-revalidate также пройдет, то CDN не вернет устаревшую версию и будет ждать, пока новая версия не будет сгенерирована на сервере.
С точки зрения пользователя это точно так же, как и инкрементная регенерация статических сайтов. Только здесь нам не нужно создавать весь сайт для первого развертывания, первый посетитель инициирует создание страницы, которую он посещает.
Ресурсы
- Документация Next.js
- Web.dev stale-while-revalidate
- MDN cache-control
- Youtube.com Кэширование CDN, генерация статических сайтов и рендеринг на стороне сервера