ISR в Next.js со Strapi: вебхуки и кэш CloudFront

По мере развития веб-разработки всё важнее становится возможность быстро и эффективно обновлять контент сайта. В Strapi эту задачу решили, объединив Next.js и Strapi: сайт построен на технологии статической генерации (SSG), а обновления стали почти мгновенными.

Ключ к решению — инкрементальная статическая регенерация (ISR) в Next.js. ISR позволяет пересобирать только те страницы, которые изменились, а не весь сайт целиком. Это резко сокращает время обновления контента.

На сайте Strapi более 1000 страниц. Без ISR, чтобы увидеть правку одной-единственной страницы, пришлось бы пересобирать всё — а это около 10 минут.

Чтобы повысить эффективность ещё больше, в Strapi задействовали вебхуки. Они автоматически запускают регенерацию затронутых страниц всякий раз, когда контент в бэкенде Strapi добавляется, изменяется, удаляется, публикуется или снимается с публикации. URL вебхука выглядит так:

Токен защищает этот вызов API: он должен совпадать на стороне Strapi и на стороне Next.js.

Помимо автоматической, реализована и ручная ревалидация конкретных страниц — в ряде сценариев это полезно. Допустим, вы меняете заголовок поста в блоге. В нашей реализации Next.js автоматически ревалидирует страницу самого поста (/blog/specific), но этот заголовок может отображаться и в другом месте — например, на странице списка /blog. Её тоже нужно ревалидировать, чтобы новый заголовок появился.

Для этого в вебхук добавлен параметр page: он позволяет указать страницу для ручной ревалидации, вызвав вебхук напрямую:

Весь сайт кэшируется через CloudFront — это заметно ускоряет загрузку для пользователей. Чтобы им всегда показывался актуальный контент, в маршрут ревалидации Next.js добавлен шаг, который при регенерации страницы автоматически инвалидирует её кэш в CloudFront.

Связка ISR в Next.js, вебхуков Strapi и кэширования через CloudFront позволила добиться почти мгновенного обновления контента сайта и одновременно повысить общую производительность для пользователей.