Персонализация — процесс создания индивидуального опыта для посетителей веб-сайта — является горячей темой в Интернете в 2022 году. В переполненном мире цифровых впечатлений, претендующих на наше внимание, компании обращаются к персонализации для более глубокого взаимодействия со своими клиентами и, в конечном счете, для увеличения продаж и роста.
Еще более актуальной темой становится сокращение количества JavaScript на стороне клиента. Новые и развивающиеся фронтенд-фреймворки, такие как Astro и Eleventy, расширяют границы эры JavaScript-фреймворков конца 2010-х годов, делая своей основной задачей поставлять все меньше и меньше JavaScript по умолчанию и возвращать внимание разработчиков к бережливому, нативному и производительному вебу.
Отличная новость заключается в том, что с помощью Netlify Edge Functions вы можете добиться динамической персонализации без использования JavaScript на стороне клиента, что обеспечивает отличную работу разработчиков и еще лучший результат для конечного пользователя. Кроме того, нет необходимости в накладных расходах, связанных с использованием front-end фреймворка, просто чтобы получить эту возможность в своих проектах.
В этом видеоуроке я покажу вам, как использовать Netlify Edge Functions для перехвата HTTP-запроса на статической HTML-странице, преобразования ответа на лету путем внедрения геолокационных данных запроса и возврата обновленного ответа браузеру.
Развертывание кода учебника в Netlify
Если вы хотите немедленно приступить к работе, вы можете форкнуть репозиторий кода учебника на GitHub и развернуть сайт на своей учетной записи Netlify за считанные секунды. Нажмите на кнопку «Развернуть в Netlify» ниже и попробуйте!
Создайте сайт с нуля
В качестве альтернативы, если вы хотите создать код с нуля, вы можете следовать приведенному ниже руководству для создания упрощенной версии проекта, без функции hello world Edge Function, включенной в видеоурок.
Предварительные условия
Прежде чем приступить к работе, проверьте, есть ли у вас инструменты, необходимые для выполнения этого руководства.
- Node.js (рекомендуется LTS)
- GitHub CLI
- Netlify CLI
Настройка проекта для обслуживания статических HTML-файлов
В новом каталоге проекта создайте каталог public. Внутри нее добавьте файл index.html и файл с именем hello-template.html.
Добавьте несколько основных шаблонов в файл index.html (если вы используете VSCode, вы можете ввести ! с последующей клавишей tab в HTML-файл, чтобы создать некоторые HTML-шаблоны), или вы можете скопировать и вставить файл из репозитория учебника.
Далее добавьте аналогичный шаблон в hello-template.html, а также некоторое содержимое-заполнитель, которое мы заменим с помощью функции Edge Function в следующем шаге. Мы собираемся заменить заполнитель данными геолокации, поэтому я назвал свой заполнитель LOCATION_UNKNOWN.
Далее мы настроим проект на обслуживание этих двух статических HTML-файлов из публичной директории с помощью файловой конфигурации Netlify. В корень проекта добавьте файл netlify.toml. Это файл конфигурации, который определяет, как Netlify собирает и развертывает ваш сайт — включая перенаправления, настройки ветвления, маршрутизацию граничных функций и многое другое.
Добавьте следующий код в netlify.toml, чтобы указать Netlify обслуживать ваши статические файлы из публичной директории.
[build]
publish = "/public"
Давайте проверим, все ли подключено. В окне терминала в корне вашего проекта выполните следующую команду, чтобы запустить сервер разработки с помощью Netlify CLI:
netlify dev
Когда сервер разработки будет запущен, перейдите в браузер, и вы увидите index.html на http://localhost:8888 и hello-template.html на http://localhost:8888/hello-template. Теперь вы готовы преобразовать этот статический HTML-файл с помощью функции Edge Function!
Преобразование HTTP-ответа с помощью функции Edge Function
Мы напишем Edge-функцию, которая перехватит запрос к hello-template с помощью параметра запроса URL (?method=transform), возьмет данные геолокации из запроса и преобразует ответ HTTP, чтобы включить название города и страны.
Функции Edge Functions можно писать с помощью JavaScript или TypeScript. В этом учебнике мы будем писать код Edge Function на JavaScript. Файлы Edge Function находятся в специальном каталоге, чтобы Netlify знал, как их упаковать при развертывании сайта. В корне вашего проекта создайте каталог netlify, а внутри него добавьте каталог edge-functions. Создайте новый файл в каталоге edge-functions и назовите его transform-hello-template.js.
Прежде чем писать код функции Edge Function, давайте подключим файл к среде разработки. В ваш файл netlify.toml добавьте следующий код, ниже настроек сборки. Это указывает Netlify запускать функцию transform-hello-template, когда пользователь запрашивает страницу hello-template в браузере. Остановите и запустите сервер разработки, чтобы CLI принял изменения в netlify.toml.
# netlify.toml
[[edge_functions]]
path = "/hello-template"
function = "transform-hello-template"
В transform-hello-template.js добавьте следующий код. И давайте распакуем, что он делает.
// netlify/edge-functions/transform-hello-template.js
export default async (request, context) => {
const url = new URL(request.url);
// Look for the "?method=transform" query parameter
// return if we don't find it
if (url.searchParams.get("method") !== "transform") {
return;
}
// Get the page content that will be served next
// In this tutorial, it will be the content from hello-template
const response = await context.next();
const page = await response.text();
// Search for the placeholder
const regex = /LOCATION_UNKNOWN/i;
// Get the location from the Context object
const location = `${context.geo.city}, ${context.geo.country.name}`;
// Replace the content with the current location
const updatedPage = page.replace(regex, location);
// Return the response
return new Response(updatedPage, response);
};
Мы начинаем с экспорта стандартной асинхронной функции. Edge-функции принимают два параметра, request — который представляет входящий HTTP-запрос, и context — который является специфическим API Netlify, раскрывающим геолокационные данные, позволяющим работать с куки, перезаписью, информацией о сайте и многим другим.
Сначала мы разбираем URL из запроса. Затем мы ищем параметр запроса method=transform в URL, используя url.searchParams.get(). Если мы не находим требуемый параметр запроса в URL, мы возвращаемся и выходим из функции Edge Function раньше времени, которая будет обслуживать шаблон hello с неизменным заполнителем.
Если мы находим ?method=transform в URL, мы используем context.next() для захвата следующего запроса в цепочке HTTP — в данном случае это наш файл hello-template — и затем мы захватываем текстовое содержимое page, присваивая его переменной page. Далее мы используем регулярное выражение для поиска в тексте hello-template местодержателя, который мы хотим заменить геолокационными данными.
Геолокационные данные доступны в объекте context, как context.geo. Используя интерполяцию строк JavaScript, мы можем построить дружественную, читабельную строку, состоящую из названия города и страны, которую затем используем для замены строки, найденной регулярным выражением.
Наконец, мы возвращаем новый HTTP-ответ, содержащий обновленную страницу. Перейдите в браузере по следующему URL: http://localhost:8888/hello-template?method=transform — и вы увидите, что местоположение страницы обновлено геолокационными данными, полученными с помощью Edge! Персонализация без JavaScript: достижение получено! 🏆
Добавьте контроль версий git
Теперь, когда проект работает локально, у нас есть несколько вариантов того, как развернуть его в Netlify. В этом руководстве мы подключимся к новому git-репозиторию, чтобы получить CI/CD и настроить его бесплатно.
Инициализируйте новый git-репозиторий, выполнив следующую команду:
git init
Поставьте и зафиксируйте свои файлы:
git add . # stage your files
git commit -m 'Initial commit' # commit your files with a commit message
Следующие шаги помогут вам добавить ваш репозиторий в GitHub с помощью GitHub CLI — но вы можете отправить свой проект в GitHub любым удобным для вас способом.
Выполните следующую команду в терминале, чтобы создать новый репозиторий, подключенный к вашей учетной записи GitHub:
gh repo create
В ответ на запрос о типе репозитория, который вы хотите создать, выберите: Push an existing local repository to GitHub. Следуйте оставшимся подсказкам, чтобы заполнить соответствующие детали проекта. Теперь вы готовы к развертыванию в Netlify!
Развертывание в Netlify с помощью Netlify CLI
Если вы еще не вошли в Netlify CLI, выполните следующую команду в терминале и следуйте подсказкам для авторизации в Netlify (откроется окно браузера).
netlify login
Далее выполните следующую команду для инициализации нового проекта на Netlify.
netlify init
Заполните следующие подсказки для настройки нового проекта:
- Что вы хотите сделать?
Создать и настроить новый сайт. - Команда:
YOUR_TEAM - Название сайта (необязательно):
CHOOSE_UNIQUE_SITE_NAME
Следующие подсказки будут предварительно заполнены, учитывая, что мы предоставили файл netlify.toml в репозитории. Нажмите Enter, чтобы использовать значения по умолчанию.
- Ваша команда сборки (hugo build/yarn run build/etc):
(мы не используем фреймворк или скрипт сборки, поэтому это поле остается пустым!) - Каталог для развертывания (пустой для текущего каталога):
(public) - Папка функций Netlify:
(netlify/functions)
Подождите несколько секунд… и ваш новый сайт развернут! 🎉
Выполните следующие команды в терминале, чтобы открыть сайт в браузере и открыть панель администратора Netlify.
netlify open:site # open the site in your browser
netlify open:admin # open the Netlify admin panel in your browser
И все готово! Теперь вы можете испытать свою no-JavaScript-personalization-at-the-edge, отправив URL сайта своим друзьям и продемонстрировав свои новые, блестящие навыки!
Заключительные мысли
Когда мы говорим о новых возможностях, которые предоставляют нам функции Edge как разработчикам и пользователям Интернета, часто возникает вопрос: «Должен ли я теперь все перевести на Edge?». Хотя ответ обычно звучит так: «Смотря что», всегда стоит рассматривать эти новые инструменты и технологии как дополнение к развивающейся веб-экосистеме, а не как замену существующих возможностей.
В то время как Edge, безусловно, дает нам другой набор преимуществ по сравнению с бессерверными функциями — прежде всего, возможность запускать код с ближайшего сервера к любому пользователю по всему миру — бывают случаи, когда вам может понадобиться контроль над тем, где ваш код запускается в облаке, например, в ближайшем месте к службам базы данных. В любом случае, функции Edge Functions — это великолепный пример использования для уменьшения количества JavaScript на стороне клиента в браузере, при этом обеспечивая персонализированный опыт для пользователей Интернета.
И я, со своей стороны, с нетерпением жду, что еще будет впереди.