Последнее обновление 03.06.2023 — Василий Иванов
Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.
Next.js — это популярная платформа с открытым исходным кодом для разработки приложений React, отображаемых на стороне сервера. Благодаря простоте использования и адаптивности вы можете использовать его для создания сложных веб-приложений.
Пограничные функции — одна из самых интересных функций Next.js. Узнайте о функциях Edge и пяти способах их использования в Next.js.
Что такое пограничные функции?
Мощная функция пограничных функций Next.js позволяет запускать пользовательские бессерверные функции ближе к конечному пользователю в пограничной сети. Это означает, что код работает на серверах, расположенных географически ближе к клиенту, что обеспечивает более быструю и эффективную работу веб-приложений.
Пограничные функции могут изменять запрос или ответ, извлекать данные, выполнять аутентификацию и многое другое.
Пограничные функции запускаются мгновенно. Поскольку они сокращают время, необходимое для загрузки данных и отображения страниц, вы можете использовать функции Edge для повышения производительности в Интернете и удобства пользователей.
Современные гаджеты и гаджеты следующего поколения нуждаются в граничных вычислениях, потому что они более надежны и безопасны, чем облачные вычисления, и используют граничные функции. Кроме того, он более эффективен и гибок, чем вычисления на устройстве в одиночку.
Вот несколько способов использования функций Edge в Next.js.
1. Динамическая маршрутизация
Одним из способов использования функций Edge в Next.js является динамическая маршрутизация. Вы можете определять настраиваемые маршруты и управлять ими на основе динамических данных, таких как параметры запроса или заголовки запроса.
Это полезно для создания более адаптируемых и динамичных веб-приложений, которые обрабатывают различные запросы.
Вы можете использовать функции Next.js Edge для реализации динамической маршрутизации следующим образом:
// pages/api/[slug].js
export default function handler(req, res) {
const { slug } = req.query;
if (slug === 'about') {
res.status(200).send('This is the about page!');
} else if (slug === 'contact') {
res.status(200).send('This is the contact page!');
} else {
res.status(404).send('Page not found.');
}
}
В этом примере показано содержимое файла с именем [slug.js] в каталоге pages/api, чтобы определить собственный маршрут с динамическими данными. Затем граница слага удаляется из запроса запроса с помощью req.query, что позволяет вам работать с требованиями, сильно основанными на значении слага.
Например, если пользователь переходит на http://example.com/api/about, для параметра slug будет установлено значение about. Функция обработчика запустит соответствующий блок кода и отобразит сообщение «Это страница о нас!»
Если клиент посещает http://example.com/api/contact, обработчик вернет сообщение «Это страница контактов!»
Используя функции Edge для динамической маршрутизации, разработчики могут создавать более адаптируемые и динамичные веб-приложения, способные обрабатывать различные запросы на основе изменяющихся данных.
2. Извлечение данных
В Next.js одним из распространенных вариантов использования функций Edge является выборка данных. Вы можете снизить нагрузку на сервер и повысить производительность веб-приложения, перенеся данные на периферию.
Функции Next.js Edge могут выполнять выборку данных, как показано в этом примере:
// pages/api/users/[id].js
export default async function handler(req, res) {
const { id } = req.query;
// Fetch user data from a third-party API
const response = await fetch(`https://api.example.com/users/${id}`);
const user = await response.json();
// Return the user data
res.status(200).json(user);
}
В этом примере определяется конечная точка API, которая использует параметр запроса id для получения пользовательских данных из стороннего API. Используя метод fetch, вы можете отправить запрос к API, а затем дождаться ответа с ключевым словом await.
Затем код извлекает информацию JSON, вызывая функцию response.json(), и сохраняет ее в переменной. Наконец, он использует метод ответа json для форматирования данных ответа как JSON.
Извлечение данных пограничной функцией — это мощный метод, который позволяет получать данные на границе, снижая нагрузку на сервер и повышая производительность веб-приложений.
Вы также можете снизить простои спроса и предоставить клиентам более быстрые и отзывчивые страницы, получая информацию из внешнего интерфейса программирования на периферии.
3. Используется для аутентификации
Внедряя правила управления доступом на периферии, вы можете повысить безопасность своего веб-приложения и снизить риск несанкционированного доступа к конфиденциальным данным.
В качестве примера рассмотрим функцию, которая проверяет состояние аутентификации клиента и возвращает его обратно в ответ. Вот схема проверки с использованием возможностей Edge в Next.js:
// pages/api/auth.js
export default (req, res) => {
const { isAuthenticated } = req.cookies;
if (isAuthenticated) {
res.status(200).json({ message: 'You are authenticated' });
} else {
res.status(401).json({ message: 'You are not authenticated' });
}
}
На этом рисунке функция Edge проверяет файл cookie на наличие маркера аутентификации и, если он найден, создает ответ JSON с информацией о пользователе.
4. A/B-тест
Еще один способ использования функций Next.js Edge — оптимизировать производительность веб-приложения с помощью A/B-тестирования. Вы можете сравнить различные версии веб-сайта или приложения с помощью A/B-тестирования, чтобы определить, какая из них работает лучше.
Иллюстрация того, как функции Next.js Edge можно использовать для проведения A/B-тестирования, выглядит следующим образом:
// pages/api/abtest.js
const variants = ['variantA', 'variantB'];
export default function handler(req, res) {
const { userId } = req.query;
// Generate a random variant for the user
const variantIndex = Math.floor(Math.random() * variants.length);
const variant = variants[variantIndex];
// Store the variant in a cookie
res.setHeader('Set-Cookie', `variant=${variant}; Max-Age=604800;`);
// Render the corresponding variant
if (variant === 'variantA') {
res.status(200).send('Welcome to variant A!');
} else {
res.status(200).send('Welcome to variant B!');
}
}
Этот код демонстрирует конечную точку интерфейса API, которая запускает тест A/B для двух уникальных вариантов страницы сайта. Он использует метод Math.random() для создания случайного варианта для пользователя и сохраняет его в файле cookie с помощью метода res.setHeader. Это позволяет коду гарантировать, что клиент увидит тот же вариант при будущих посещениях.
Затем код использует значение файла cookie варианта для отображения соответствующего варианта. Он отображает сообщение, указывающее, какой вариант он выбрал.
Используя функции Edge, разработчики могут использовать мощный инструмент под названием A/B-тестирование для сравнения различных версий приложения или веб-страницы, чтобы определить, какая из них работает лучше. Вы можете собирать данные о поведении пользователей и улучшать производительность веб-приложения и взаимодействие с пользователем, случайным образом распределяя пользователей по различным вариантам.
5. Кэширование ответов
Хранение реакций — это еще один способ использования возможностей Edge в Next.js для оптимизации веб-исполнения. Это позволяет нам сохранять реакции в течение определенного периода времени, чтобы уменьшить количество запросов к серверу и работать над скоростью веб-приложения.
Вот иллюстрация того, как вы можете выполнять хранение реакций с помощью Edge Capabilities в Next.js:
// pages/api/data.js
const data = { name: 'John Doe', age: 30 };
export default function handler(req, res) {
// Set response headers to enable caching
res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate');
// Return data
res.status(200).json(data);
}
В этом примере определяется конечная точка API, которая возвращает ответ JSON с некоторыми данными.
Мы устанавливаем заголовки реакции, используя технику res.setHeader, чтобы включить резервирование в течение 10 секунд с использованием границы s-max-age. Это означает, что CDN может кэшировать ответ на срок до десяти секунд, прежде чем потребуется обновление.
Мы также используем параметр stale-while-revalidate, чтобы позволить CDN обслуживать кешированный ответ, срок действия которого истек, пока новый ответ создается в фоновом режиме. Даже если срок действия кэшированного ответа истек, CDN сгенерирует новый и всегда будет отправлять ответ.
Кэширование ответов пограничных функций — отличный способ ускорить работу веб-приложения и сократить количество запросов к серверу. Вы можете гарантировать пользователям более быстрое и быстрое реагирование веб-сайтов, кэшируя ответы на заданное время.
Пограничные функции — невероятно мощная функция Next.js
Поддержка Next.js пограничных функций — это привлекательная функция, позволяющая запускать настраиваемые бессерверные функции ближе к конечному пользователю в пограничной сети.
Существует несколько способов использования функций Edge для улучшения веб-приложений: A/B-тестирование, кэширование ответов, динамическая маршрутизация, выборка данных, аутентификация.
Использование возможностей Edge в вашей архитектуре может улучшить работу ваших клиентов и привести к более быстрому и быстрому отклику веб-приложений.
