Функция Edge может быть небольшой, четко определенной концепцией, но вы можете использовать ее для самых разных целей.

Next.js — это популярная платформа с открытым исходным кодом для разработки приложений React, отображаемых на стороне сервера. Благодаря простоте использования и адаптивности вы можете использовать его для создания сложных веб-приложений.

Пограничные функции — одна из самых интересных функций Next.js. Узнайте о функциях Edge и пяти способах их использования в Next.js.

Что такое пограничные функции?

Мощная функция пограничных функций Next.js позволяет запускать пользовательские бессерверные функции ближе к конечному пользователю в пограничной сети. Это означает, что код работает на серверах, расположенных географически ближе к клиенту, что обеспечивает более быструю и эффективную работу веб-приложений.

Пограничные функции могут изменять запрос или ответ, извлекать данные, выполнять аутентификацию и многое другое.

Пограничные функции запускаются мгновенно. Поскольку они сокращают время, необходимое для загрузки данных и отображения страниц, вы можете использовать функции Edge для повышения производительности в Интернете и удобства пользователей.

instagram viewer

Нужны современные гаджеты и гаджеты следующего поколения граничные вычисления потому что он более надежен и безопасен, чем облачные вычисления и использует функции Edge. Кроме того, он более эффективен и гибок, чем вычисления на устройстве в одиночку.

Вот несколько способов использования функций Edge в Next.js.

1. Динамическая маршрутизация

Одним из способов использования функций Edge в Next.js является динамическая маршрутизация. Вы можете определять настраиваемые маршруты и управлять ими на основе динамических данных, таких как параметры запроса или заголовки запроса.

Это полезно для создания более адаптируемых и динамичных веб-приложений, которые обрабатывают различные запросы.

Вы можете использовать функции Next.js Edge для реализации динамической маршрутизации следующим образом:

// страницы/api/[slug].js
экспортпо умолчаниюфункцияобработчик(запрос, разрешение) {
константа {слаг} = req.query;
если (слаг 'о') {
 рез.статус(200).отправлять(«Это страница о нас!»);
 } ещеесли (слаг 'контакт') {
 рез.статус(200).отправлять(«Это страница контактов!»);
 } еще {
 рез.статус(404).отправлять('Страница не найдена.');
 }
}

В этом примере показано содержимое файла с именем [slug.js] в страницы/API каталог для определения пользовательского маршрута с динамическими данными. Затем граница слага удаляется из запроса запроса с помощью req.query, что позволяет вам справляться с требованиями, в значительной степени основанными на ценности слизняк.

Например, если пользователь переходит на http://example.com/api/about, параметр slug будет установлен на о. обработчик функция запустит соответствующий блок кода и отобразит сообщение «Это страница о нас!»

Если клиент посещает http://example.com/api/contact, обработчик вернет сообщение "Это страница контактов!"

Используя функции Edge для динамической маршрутизации, разработчики могут создавать более адаптируемые и динамичные веб-приложения, способные обрабатывать различные запросы на основе изменяющихся данных.

2. Получение данных

В Next.js одним из распространенных вариантов использования функций Edge является выборка данных. Вы можете снизить нагрузку на сервер и повысить производительность веб-приложения, перенеся данные на периферию.

Функции Next.js Edge могут выполнять выборку данных, как показано в этом примере:

// страницы/API/пользователи/[id].js
экспортпо умолчаниюасинхронныйфункцияобработчик(запрос, разрешение) {
константа {идентификатор} = req.query;


// Получаем пользовательские данные из стороннего API
константа ответ = Ждите принести(` https://api.example.com/users/${идентификатор}`);
константа пользователь = Ждите ответ.json();
// Возвращаем данные пользователя
 рез.статус(200.json (пользователь);
}

В этом примере определяется конечная точка API, которая использует идентификатор параметр запроса для получения пользовательских данных из стороннего API. Используя принести метод, вы можете отправить запрос к API, а затем дождаться ответа с ключевым словом await.

Затем код извлекает информацию JSON, вызывая ответ.json() и сохраняет его в переменной. Наконец, он использует json метод ответа для форматирования данных ответа как JSON.

Извлечение данных пограничной функцией — это мощный метод, который позволяет получать данные на границе, снижая нагрузку на сервер и повышая производительность веб-приложений.

Вы также можете снизить простои спроса и предоставить клиентам более быстрые и отзывчивые страницы, получая информацию из внешнего интерфейса программирования на периферии.

3. Используется в аутентификации

Внедряя правила управления доступом на периферии, вы можете повысить безопасность своего веб-приложения и снизить риск несанкционированного доступа к конфиденциальным данным.

В качестве примера рассмотрим функцию, которая проверяет состояние аутентификации клиента и возвращает его обратно в ответ. Вот схема проверки с использованием возможностей Edge в Next.js:

// страницы/api/auth.js
экспортпо умолчанию (требование, разрешение) => {
константа { isAuthenticated } = req.cookies;
если (проверено) {
 рез.статус(200).json({ сообщение: «Вы аутентифицированы» });
 } еще {
 рез.статус(401).json({ сообщение: «Вы не авторизованы» });
 }
}

На этом рисунке функция Edge проверяет файл cookie на наличие маркера аутентификации и, если он найден, создает ответ JSON с информацией о пользователе.

4. A/B-тест

Еще один способ использования функций Next.js Edge — оптимизировать производительность веб-приложения с помощью A/B-тестирования. Вы можете сравнить различные версии веб-сайта или приложения с помощью A/B-тестирования, чтобы определить, какая из них работает лучше.

Иллюстрация того, как функции Next.js Edge можно использовать для проведения A/B-тестирования, выглядит следующим образом:

// страницы/api/abtest.js
константа варианты = ['вариант А', 'вариант Б'];
экспортпо умолчаниюфункцияобработчик(запрос, разрешение) {
константа {userId} = req.query;


// Генерируем случайный вариант для пользователя
константа индекс варианта = Математика.пол(Математика.random() * варианты.длина);
константа вариант = варианты[индекс_варианта];


// Сохраняем вариант в куки
 res.setHeader(«Сет-куки», `вариант=${вариант}; Максимальный возраст=604800;`);
// Отрисовываем соответствующий вариант
если (вариант 'вариант А') {
 рез.статус(200).отправлять(«Добро пожаловать в вариант А!»);
 } еще {
 рез.статус(200).отправлять(«Добро пожаловать в вариант Б!»);
 }
}

Этот код демонстрирует конечную точку интерфейса API, которая запускает тест A/B для двух уникальных вариантов страницы сайта. Он использует Math.random() метод для создания случайного варианта для пользователя и сохранения его в файле cookie с res.setHeader метод. Это позволяет коду гарантировать, что клиент увидит тот же вариант при будущих посещениях.

Затем код использует вариант значение cookie для отображения соответствующего варианта. Он отображает сообщение, указывающее, какой вариант он выбрал.

Используя функции Edge, разработчики могут использовать мощный инструмент под названием A/B-тестирование для сравнения различных версий приложения или веб-страницы, чтобы определить, какая из них работает лучше. Вы можете собирать данные о поведении пользователей и улучшать производительность веб-приложения и взаимодействие с пользователем, случайным образом распределяя пользователей по различным вариантам.

5. Кэширование ответов

Хранение реакций — это еще один способ использования возможностей Edge в Next.js для оптимизации веб-исполнения. Это позволяет нам сохранять реакции в течение определенного периода времени, чтобы уменьшить количество запросов к серверу и работать над скоростью веб-приложения.

Вот иллюстрация того, как вы можете выполнять хранение реакций с помощью Edge Capabilities в Next.js:

// страницы/api/data.js
константа данные = { имя: 'Джон Доу', возраст: 30 };
экспортпо умолчаниюфункцияобработчик(запрос, разрешение) {
// Устанавливаем заголовки ответа для включения кэширования
 res.setHeader(«Кэш-Контроль», 's-maxage=10, устаревший при повторной проверке');
// Возвращаем данные
 рез.статус(200.json (данные);
}

В этом примере определяется конечная точка API, которая возвращает ответ JSON с некоторыми данными.

Мы устанавливаем заголовки реакции с помощью res.setHeader метод, чтобы включить резервирование в течение 10 секунд с помощью s-max-возраст граница. Это означает, что CDN может кэшировать ответ на срок до десяти секунд, прежде чем потребуется обновление.

Мы также используем устаревший во время повторной проверки параметр, позволяющий CDN обслуживать кешированный ответ, срок действия которого истек, пока новый ответ создается в фоновом режиме. Даже если срок действия кэшированного ответа истек, CDN сгенерирует новый и всегда будет отправлять ответ.

Кэширование ответов пограничных функций — отличный способ ускорить работу веб-приложения и сократить количество запросов к серверу. Вы можете гарантировать пользователям более быстрое и быстрое реагирование веб-сайтов, кэшируя ответы на заданное время.

Пограничные функции — невероятно мощная функция Next.js

Поддержка Next.js пограничных функций — это привлекательная функция, позволяющая запускать настраиваемые бессерверные функции ближе к конечному пользователю в пограничной сети.

Существует несколько способов использования функций Edge для улучшения веб-приложений: A/B-тестирование, кэширование ответов, динамическая маршрутизация, выборка данных, аутентификация.

Использование возможностей Edge в вашей архитектуре может улучшить работу ваших клиентов и привести к более быстрым и отзывчивым веб-приложениям.