Для своего личного веб-сайта я использую Hygraph (он же GraphCMS) в качестве безголовой CMS. Я использую рендеринг на стороне сервера (SSR) для извлечения и генерации маршрутов и содержимого статических страниц.
Next.js позволяет нам обновлять статические страницы после сборки приложения. Благодаря добавочной статической регенерации (ISR) мы можем использовать статическую генерацию для каждой страницы без необходимости перестраивать весь сайт!
С ISR мы получаем преимущества статики при масштабировании до миллионов страниц.
Для этого у меня есть опция revalidate для повторной генерации статических страниц каждые 60 минут (строка 22).
Недавно я обновил часть контента своего веб-сайта на hygraph и обнаружил, что если информацию необходимо обновить немедленно, моим посетителям придется ждать до 60 минут (в худшем случае), чтобы увидеть обновленные данные. Это ужасно!
Чтобы смягчить эту проблему, я использовал статическую повторную проверку по запросу. Это означает, что обновленнаястатическая страница создается заново только при обновлении содержимого на Hygraph. И вот как это сделать.
Как настроить статическую повторную проверку по требованию
1. Создайте маршрут API Revalide ISR
Важно добавить секрет REVALIDATE_TOKEN в файл .env с выбранным вами секретом.
⚠️ Важно: если вы используете ключ, отличный от
slugв hygraph, вы должны обновить код в строке 17.
2. Создайте веб-хук Hygraph
Затем мне нужно было создать новый веб-хук на Hygraph, который вызывал бы конечную точку API, которую мы только что создали, когда страница повторно публикуется (содержимое изменяется).
Войдите в свою учетную запись Hygraph, затем выберите вкладку Webhooks на боковой панели (внизу слева). Теперь нажмите кнопку «Создать».
Настройте веб-перехватчик следующим образом, убедившись, что вы выбрали правильную модель контента в зависимости от вашего варианта использования. Для своего личного веб-сайта я использую модель Page. Веб-перехватчик срабатывает, когда страница Published публикуется или не публикуется.
Опция Include payload должна быть включена, чтобы отправить страницу slug, которую мы хотим повторно проверить, вместе с запросом. Затем конечная точка повторной проверки обрабатывает тело запроса.
⚠️ Важно: убедитесь, что вы заменили
YOUR_WEBSITEбазовым URL-адресом вашего веб-сайта, аYOUR_SECRET— секретным токеном, который вы определили в файле.env.
3. Удалите параметр повторной проверки из getStaticProps.
В pages/[slug].tsx вам нужно удалить опцию revalidate, если вы использовали ее раньше. Его значение по умолчанию равно false.
4. Разверните и протестируйте
Создайте и разверните свое приложение. Вы также должны настроить переменную REVALIDATE_TOKEN environment на своем хосте. Если вы используете Vercel, ознакомьтесь с документацией Переменные среды.
Внесите небольшие изменения в содержание одной из ваших страниц. Повторная проверка должна сработать, и статический контент мгновенно сгенерируется заново!
5. Устранение неполадок
Если у вас возникнут какие-либо проблемы, вы можете проверить журналы веб-перехватчиков в Hygraph. Ответ должен быть 200 с { revalidated: true }.
Если нет, вы можете дополнительно изучить, что может быть причиной сбоя события веб-перехватчика.
Некоторые возможные причины: неправильный URL-адрес, секрет в URL-адресе веб-перехватчика и/или переменной среды отсутствует или неверен.
Если вы все еще не можете решить проблему, свяжитесь со мной. Я рад помочь 😊
Исходный код
Исходный код моего сайта вы можете найти в этом репозитории. Если вы хотите поддержать меня, не забудьте нажать кнопку 👏🏼 столько раз, сколько сможете, и пометить репозиторий звездочкой ⭐
Если вам нравится читать качественный контент на Medium, подпишитесь на меня и подпишитесь, чтобы автоматически получать мои истории при публикации. Удачного кодирования! 🥳
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
