Transcription
Всем привет, в этом видео мы поговорим о том, как вы можете использовать ваш экземпляр WordPress как, скажем так, headless CMS для пользовательского, ну, в данном случае Next.js фронтенда, но вы можете использовать другой фреймворк, такой как React, Vue или какой-либо другой full stack фреймворк, и основы останутся прежними.
А именно, вы можете получать данные в ваше приложение, используя WordPress REST API, который поставляется с WordPress по умолчанию, но у них также есть опция GraphQL, если вы предпочитаете это. Итак, в этом видео я быстро расскажу, как вы можете это сделать. Несколько советов и хитростей, покажу, что это очень реалистичный вариант. И я думаю, что это может быть очень полезно, потому что, возможно, вы уже знакомы с WordPress или у вас есть клиенты, которые хотят остаться с WordPress, потому что они уже знакомы с ним, верно?
Итак, вы можете просто захотеть использовать WordPress, но вы можете захотеть использовать более новый, блестящий фреймворк для фронтенда, и это абсолютно возможно. И я объясню, как это работает с кешированием, тоже, верно? Итак, в Next.js у нас есть куча кеширования. Так что то, что вы видите здесь, на самом деле является приложением Next.js, которое имеет здесь данные, и они поступают из отдельного экземпляра WordPress. Так как же мы можем это сделать? Давайте начнем с нуля, верно?
Итак, я просто проигнорирую стилизацию в этом видео. Вы можете стилизовать его как блог или для любого другого вашего случая использования. Самое главное — как мы можем получить данные в приложение Next.js и как мы справляемся с кешированием, таким как SSG и ревалидация, и ISR. Я объясню, что это такое. Хорошо, давайте приступим.
Итак, у меня здесь совершенно новая папка. У меня здесь нет приложения. Я просто создам новое приложение Next.js. Совершенно новый Next.js 16 на момент записи. Хорошо. И позвольте мне также запустить сервер разработки. И давайте откроем его. Хорошо.
Итак, здесь у нас стандартный шаблон Next.js. Позвольте мне удалить этот шаблон здесь. Так что у нас просто пустая страница. Я просто скажу здесь "привет". Хорошо.
Итак, теперь вы можете видеть, что у меня здесь одна страница, домашняя страница, и она просто отображает текст "привет". Но мы хотим отобразить, скажем так, посты из нашего экземпляра WordPress. Теперь нам понадобится какой-то экземпляр WordPress. Я буду использовать Cloudways в этом видео. Да, они также являются сегодняшними спонсорами, но мне очень понравилось ими пользоваться. И на момент записи у них сейчас идет большая распродажа. Так что проверьте ссылку в описании. И обязательно используйте мой промокод, который я покажу здесь, чтобы получить еще лучшую цену.
Итак, если вы хотите следовать за мной, вперед и создайте здесь экземпляр WordPress с Cloudways. Действительно мощная хостинговая платформа. И позвольте мне показать вам это. Итак, я перейду в панель управления. Работает это так, что мы можем купить сервер, и у вас может быть несколько приложений на одном сервере, но по умолчанию мы можем начать с одного приложения. Вы можете видеть, что он оптимизирован для всех видов PHP-приложений. Я просто выберу стандартную установку WordPress. Здесь я могу просто назвать "первое приложение", "первый сервер".
Для стека приложений у них теперь есть "молниеносный стек", который может быть быстрее. А затем мы можем выбрать провайдера для сервера. Итак, Cloudways на самом деле является компанией Digital Ocean, но они позволяют вам выбирать из этих других провайдеров, если вы предпочитаете это. Мы можем выбрать тип сервера и выбрать, насколько мощным он должен быть. А затем мы можем выбрать местоположение. Я рекомендую вам выбрать местоположение, которое ближе всего к вашим фактическим пользователям, не к вам, а к вашим фактическим пользователям. А затем вы можете нажать "запустить". Хорошо.
Итак, через несколько минут все готово. У нас есть все настройки для самого сервера. Но мы хотим видеть фактические приложения на сервере. Итак, здесь вы можете видеть фактические детали, включая доступ к панели администратора, и на самом деле давайте перейдем в панель администратора прямо здесь. У меня есть мои учетные данные прямо здесь, автоматически сгенерированные Cloudways, и я войду прямо здесь. Хорошо, вот мы и пришли.
Здесь у нас панель администратора, и здесь у нас наш сайт, просто стандартный шаблон. Если я перейду к постам сейчас, вы можете видеть, что по умолчанию есть этот пост "привет, мир". Давайте просто добавим еще один пост сюда. Так что у нас будет два. Я назову это "второй пост". Это второй пост. Я опубликую это. Круто.
Итак, теперь, если я зайду на фронтенд, который вы получаете из коробки с WordPress, вот что мы видим. Теперь, конечно, мы хотим иметь наш собственный пользовательский фронтенд с Next.js в данном случае. Так как же нам получить эти посты в наше приложение Next.js? Ну, по умолчанию у вас есть REST API. Так что, если вы используете URL для вашего сайта, это тот, который я получил от Cloudways. А затем, если вы добавите эту часть сюда, и если я перейду туда, у меня на самом деле есть куча данных здесь. Это в так называемом JSON-формате. Я могу нажать "предварительный просмотр" здесь, чтобы красиво отформатировать его.
Теперь то, что я вижу здесь, на самом деле это те посты, которые у нас есть. Так что вы можете видеть, что эта часть здесь — это один пост, верно? Так что здесь вы можете видеть, что заголовок — "второй пост". У него есть ID, и если мы прокрутим немного вниз, и здесь мы увидим контент, верно? Фактически, это второй пост. Мы также видим здесь слаг. Так что, если вы строите блог и хотите иметь слаг в URL, вы можете использовать это. Так что это все данные об этом одном посте. А затем, если я прокручу вниз, здесь есть еще один пост с другим слагом и со своими собственными данными. Так что здесь два поста.
Кстати, здесь также есть опция для страниц вместо постов. Так что, возможно, это то, что вы хотите использовать. Но в этом видео мы сосредоточимся только на этих постах здесь. Так что, конечно, я могу перейти сюда напрямую по URL. Но как нам получить это в мое приложение здесь, прямо здесь?
Теперь я должен упомянуть, что есть также плагины для использования GraphQL вместо REST API. Однако в этом видео мы просто будем использовать это. Хорошо, а теперь как мне получить эти данные в мое фактическое приложение Next.js? Ну, здесь, в компоненте страницы, я могу просто сделать вызов fetch, верно? Это серверный компонент. Мы можем получать данные прямо здесь, и нам просто нужно использовать тот URL, который мы только что использовали в адресной строке.
Итак, это мой URL Cloudways, а затем эта часть в конце. Я просто парсю это, и это JSON-данные. Так что я парсю это здесь, а затем просто логирую это здесь, еще не отображая на странице. Теперь, когда я это сделаю, вы увидите, вы можете видеть здесь лог в моем терминале, потому что он работает на сервере, верно, серверный компонент, но вы можете видеть, что мы получаем те же данные здесь, которые мы только что видели в браузере.
Итак, теперь мы можем просто отобразить это здесь на странице, верно? Так что я могу иметь что-то вроде H1, а затем просто пройтись по каждому из этих постов. Теперь, если я зайду на свою домашнюю страницу, вы можете видеть, что у меня есть пост в блоге, а затем у меня есть второй пост, и позвольте мне показать это так. Так что вы можете видеть, что теперь у меня есть второй пост, это post.title.rendered, а затем мы также отображаем контент, и это второй пост, а затем у нас есть другой пост с этим заголовком и контентом, и позвольте мне убрать H1, так что у нас просто есть эти посты, и позвольте мне добавить нижнюю границу к каждому посту здесь, верно?
Итак, теперь я смог получить данные из моего экземпляра WordPress, по сути, использовать его как headless WordPress, верно? Так что теперь я могу управлять своим контентом из этой панели управления, получать его в мое приложение Next.js. Так что, если я внесу изменение здесь и добавлю кучу восклицательных знаков и сохраню здесь, так что пост обновлен. Хорошо.
Теперь, когда вы вносите изменение и не видите его отражения в приложении, может возникнуть проблема с кешированием. Мы поговорим об этом позже, но, по сути, есть кеширование на уровне приложения Next.js, это на самом деле не та проблема, с которой я столкнулся. Есть также кеширование на уровне экземпляра WordPress, верно? Так что, как правило, это на самом деле очень выгодно, потому что это будет намного быстрее. Так что мы обычно хотим этого. Однако мы можем просто исключить URL API из этого кеширования, верно?
Итак, здесь у меня есть плагин Breeze. Я могу исключить URL. Так что все здесь с WordPress JSON, я просто исключу отсюда. Так что, если я внесу изменение здесь и сохраню здесь, и теперь, если я обновлю, вы увидите, что оно обновлено здесь. Есть пара трюков, кстати, которые мы можем сделать с URL. Так что я могу добавить этот _embed здесь. И если я затем залогирую данные, которые мы получаем, это на самом деле даст вам дополнительную информацию, для которой вам, возможно, пришлось бы сделать дополнительный запрос. Она теперь включена как часть этого пакета. Например, URL изображения или информация об авторе.
Вы также можете указать точные поля, которые вам нужны. Так что, если я сделаю это, я получу только ID, слаг, заголовок и контент здесь. Это может уменьшить размер пакета, а также увеличить скорость. Теперь, если у вас много постов и у вас есть, скажем так, пагинация, есть некоторые настройки для этого здесь. И на самом деле, если у вас есть функция поиска, здесь есть встроенная функция поиска. Так что вы можете видеть, если я ищу слово "второй", оно дает мне только этот пост, этот ключевое слово. Так что второй пост в данном случае. Вы также можете указать порядок сортировки. Так что, если вы хотите, чтобы он был отсортирован в определенном порядке, это возможно, и есть также опции для фильтрации. Например, только посты в определенной категории с определенным тегом.
Теперь, если вы строите блог, мы можем использовать это встроенное свойство слаг. Так что мы можем просто использовать компонент ссылки Next.js, а затем сделать его /post/слаг. Так что вместо отображения контента здесь мы поместим его на отдельную страницу. Так что я создал новую страницу здесь в Next.js. Вы можете сделать это с помощью маршрута в квадратных скобках. Так что, когда вы нажмете на один из них, слаг будет здесь, в URL. Так что нам нужно получить слаг из URL. Мы можем сделать это с помощью params. Мы можем получить слаг вот так. А затем нам нужно получить данные этого отдельного поста. Так что мы можем сделать это с помощью slug is, а затем слаг из URL. Верно?
Так что затем мы можем отобразить его заголовок и контент очень похоже. Верно? Точно так же, как и раньше, но теперь это на отдельной странице. Так что теперь, если я перейду к этому, вы можете видеть, что я получаю данные только для этого одного поста. Хорошо.
Теперь о кешировании, любимой теме всех. Э-э, так что мы только что видели, что на самом деле уже есть кеш на уровне сервера. Так что экземпляр WordPress, в зависимости от того, где вы его размещаете, в некоторых настройках может уже иметь какой-то кеш. Так что, если вы все еще прототипируете или разрабатываете свое приложение, я думаю, что обычно лучше исключить его из кеша или иметь отдельные среды. Но, по сути, как вы видели на уровне сервера, я исключил URL API WordPress из любого кеширования.
Теперь, конечно, мы хотим иметь какое-то кеширование на уровне Next.js. Теперь на уровне Next.js, как это работает здесь с кешированием. Если я запущу сборку, вы увидите некоторую информацию о страницах. Верно? Так что вы можете видеть, что домашняя страница статически отрисована. Верно? Так что во время сборки HTML для этого маршрута создается, и он будет просто кешироваться на CDN. Верно? Так что это будет очень быстро. Но что произойдет, если вы добавите еще один пост в свой экземпляр WordPress? эта домашняя страница должна быть, ну, пересоздана, можно сказать, верно? Потому что тогда появится новый пост, поэтому нам нужно создать здесь новый список, новую страницу с новым списком.
Так что Next.js имеет некоторые опции, которые мы можем использовать. Я могу указать revalidate здесь, должно быть 60 секунд, так что это, по сути, 1 минута. Это означает, что эта страница будет кешироваться в течение 1 минуты. Так что, если вы быстро добавите еще один пост в WordPress, он не будет немедленно пересоздан, но через минуту или как он будет пересоздан с последним постом. Так что будет небольшой период времени, когда он устарел, но с таким блогом, как этот, это не имеет значения. Так что вы можете указать это здесь, или в данном случае я могу также указать это здесь в fetch. Я могу сказать next revalidate через 60 секунд.
Так что тогда он также знает, что эта страница должна быть перегенерирована примерно каждую минуту, верно? Но если я запущу сборку сейчас, так что теперь, если я запущу сборку, вы увидите, что страница все еще статична, верно? Так что она все равно будет очень быстрой, верно? Но в какой-то момент у нас появятся новые данные. Так что она должна быть свежей снова. Так что она будет перевалидироваться каждые 1 минуту. И это как ISR, инкрементальная статическая регенерация. И с этой опцией revalidate мы, по сути, принимаем, что будет небольшой, знаете ли, период времени, когда она может быть устаревшей.
Если вы хотите, чтобы она немедленно обновлялась при внесении изменений, мы могли бы создать конечную точку API, обработчик маршрута, а затем вам нужно отправить вебхук в ваше приложение Next.js, затем в этом вебхуке вы можете вызвать validate path, чтобы вызвать пересоздание этой страницы. Но для блога это обычно имеет больше смысла.
Теперь, что насчет этой другой страницы? Это динамическая страница. Так что во время сборки кеширования нет. Так что причина, по которой она динамична, заключается в том, что Next.js во время сборки не знает всех возможных слагов, которые могут быть. Так что он не знает, для каких слагов ему нужно сгенерировать эту страницу. Верно? Потому что эта страница зависит от этого. Здесь есть функция generate static params. И мы можем затем указать для всех возможных слагов, для которых мы хотим сгенерировать страницу во время сборки. Так что я могу фактически получить только слаги моих постов в моем WordPress. И это то, что я верну здесь. Так что, по сути, массив слагов.
Так что, если я запущу еще одну сборку, вы увидите, что теперь она статически сгенерировала две страницы здесь благодаря этой опции, которая у вас также есть. Так что эта функция выполняется только во время сборки. Так что я не хочу добавлять кеширование здесь. Но я также мог бы указать revalidate здесь. Так что, если я изменю заголовок или что-то еще в этом посте блога, это также отразится в какой-то момент в моем приложении.
Но если кеширование вам не совсем понятно, это совершенно нормально. Это одна из самых сложных тем в Next.js. Скоро у меня будет новое видео, которое даст вам хорошее объяснение. А пока, если вы хотите запустить экземпляр WordPress, я настоятельно рекомендую вам проверить Cloudways по ссылке в описании и использовать мой промокод. Верно? Так что, действительно мощная платформа. У меня сейчас только одно приложение на моем сервере, но у меня может быть несколько приложений, не только WordPress. Если вы занимаетесь PHP-приложениями или Laravel, чем-то подобным, вы можете разместить это на этом сервере. У них также есть автономный вариант здесь с автоматическим масштабированием. Он построен на Kubernetes. Так что, если вы ищете масштабируемое решение для хостинга WordPress, проверьте Cloudways.
В любом случае, я надеюсь, это вам поможет. Спасибо за просмотр, и надеюсь увидеть вас в следующем видео.