Функцията Edge може да е малка, добре дефинирана концепция, но можете да я използвате за широк спектър от цели.

Next.js е популярна рамка с отворен код за разработване на рендирани от страна на сървъра React приложения. Благодарение на неговата лекота на използване и адаптивност, можете да го използвате за създаване на сложни уеб приложения.

Edge функциите са една от най-вълнуващите функции на Next.js. Научете за функциите на Edge и пет начина да ги използвате в Next.js.

Какво представляват Edge функциите?

Мощната функция Edge функции на Next.js ви позволява да изпълнявате персонализирани функции без сървър по-близо до крайния потребител в крайната мрежа. Това означава, че кодът се изпълнява на сървъри, намиращи се географски по-близо до клиента, което води до по-бърза и по-голяма производителност в уеб приложенията.

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

Edge функциите се изпълняват незабавно. Тъй като намаляват времето, необходимо за зареждане на данни и изобразяване на страници, можете да използвате функциите на Edge, за да подобрите уеб производителността и потребителското изживяване.

instagram viewer

Необходими са модерни и следващо поколение джаджи крайни изчисления защото е по-надежден и сигурен от облачни изчисления и използва Edge функции. В допълнение, той е по-способен и гъвкав от изчислението само на устройството.

Ето няколко начина, по които можете да използвате функциите на Edge в Next.js.

1. Динамично маршрутизиране

Един от начините, по които можете да използвате функциите на Edge в Next.js, е чрез динамично маршрутизиране. Можете да дефинирате и управлявате персонализирани маршрути въз основа на динамични данни, като параметри на заявка или заглавки на заявка.

Това е ценно за създаване на по-адаптивни и динамични уеб приложения, които се справят с различни заявки.

Можете да използвате Edge функциите на Next.js за внедряване на динамично маршрутизиране по следния начин:

// страници/api/[slug].js
износпо подразбиранефункцияманипулатор(req, res) {
конст {slug} = req.query;
ако (охлюв 'относно') {
 res.status(200).изпрати(„Това е страницата за информацията!“);
 } другоако (охлюв "контакт") {
 res.status(200).изпрати('Това е страницата за контакти!');
 } друго {
 res.status(404).изпрати('Страницата не е намерена.');
 }
}

Този пример показва съдържанието на файл с име [slug.js] в страници/api директория за определяне на потребителски маршрут с динамични данни. След това границата на охлюва се премахва от заявката за заявка с помощта на req.query, което ви позволява да се справяте с изисквания, силно основани на стойността на плужек.

Например, ако потребител отиде на http://example.com/api/about, параметърът slug ще бъде зададен на относно. The манипулатор ще изпълни съответния кодов блок и ще покаже съобщението "Това е страницата за информация!"

Ако клиентът посети http://example.com/api/contact, манипулатор ще върне съобщението "Това е страницата за контакти!"

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

2. Извличане на данни

В Next.js един често срещан случай на използване на Edge функции е извличането на данни. Можете да намалите натоварването на сървъра и да увеличите производителността на уеб приложението, като прехвърлите данните на ръба.

Функциите Edge на Next.js могат да извършват извличане на данни, както е показано в този пример:

// страници/api/потребители/[id].js
износпо подразбиранеасинхроненфункцияманипулатор(req, res) {
конст { id } = req.query;


// Извличане на потребителски данни от API на трета страна
конст отговор = изчакайте извличане (` https://api.example.com/users/${id}`);
конст потребител = изчакайте response.json();
// Връщане на потребителските данни
 res.status(200).json (потребител);
}

Този пример дефинира крайна точка на API, която използва документ за самоличност параметър на заявка за извличане на потребителски данни от API на трета страна. Използвайки извличам метод, можете да изпратите заявка до API и след това да изчакате отговор с ключовата дума await.

След това кодът извлича JSON информацията чрез извикване response.json() и го съхранява в променлива. И накрая, той използва json метод на отговора за форматиране на данните за отговора като JSON.

Edge функцията за извличане на данни е мощна техника, която ви позволява да извличате данни на ръба, намалявайки натоварването на сървъра и подобрявайки производителността на уеб приложенията.

Можете също така да намалите бездействието на търсенето и да предоставите на клиентите по-бързи, по-отзивчиви страници, като получите информация от външния програмен интерфейс на ръба.

3. Използва се при удостоверяване

Като внедрите правила за контрол на достъпа на ръба, можете да подобрите сигурността на вашето уеб приложение и да намалите риска от неоторизиран достъп до чувствителни данни.

Като пример, помислете за функция, която проверява състоянието на удостоверяване на клиента и го повтаря обратно в отговора. Ето кратко описание на проверката, включваща възможностите на Edge в Next.js:

// страници/api/auth.js
износпо подразбиране (req, res) => {
конст { isAuthenticated } = req.cookies;
ако (isAuthenticated) {
 res.status(200).json({ съобщение: „Вие сте удостоверени“ });
 } друго {
 res.status(401).json({ съобщение: „Не сте удостоверени“ });
 }
}

В тази илюстрация функцията Edge проверява бисквитката за токен за удостоверяване и, ако бъде открита, генерира JSON отговор с информацията на потребителя.

4. A/B тестът

Друг начин, по който можете да използвате функциите Edge на Next.js, е да оптимизирате производителността на уеб приложение чрез A/B тестване. Можете да сравните различни версии на уебсайт или приложение с помощта на A/B тестване, за да определите коя от тях се представя по-добре.

Илюстрация на това как функциите Edge на Next.js могат да се използват за извършване на A/B тестване е както следва:

// страници/api/abtest.js
конст варианти = [„variantA“, „variantB“];
износпо подразбиранефункцияманипулатор(req, res) {
конст {userId} = req.query;


// Генериране на произволен вариант за потребителя
конст variantIndex = математика.floor(математика.random() * variants.length);
конст вариант = варианти[variantIndex];


// Съхранявайте варианта в бисквитка
 res.setHeader(„Set-Cookie“, `вариант=${variant}; Максимална възраст=604800;`);
// Рендиране на съответния вариант
ако (вариант „variantA“) {
 res.status(200).изпрати(„Добре дошли във вариант А!“);
 } друго {
 res.status(200).изпрати(„Добре дошли във вариант Б!“);
 }
}

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

След това кодът използва вариант стойността на бисквитката за изобразяване на подходящия вариант. Той показва съобщение, което показва кой вариант е избрал.

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

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

Съхраняването на реакция е друг начин, по който можете да използвате възможностите на Edge в Next.js, за да рационализирате уеб изпълнението. Това ни позволява да поддържаме реакции за определен период от време, за да намалим броя на заявките, отправени към сървъра, и да работим върху скоростта на уеб приложението.

Ето илюстрация за това как можете да извършите съхранение на реакции с Edge Capabilities в Next.js:

// страници/api/data.js
конст данни = { име: 'Джон Доу', възраст: 30 };
износпо подразбиранефункцияманипулатор(req, res) {
// Задайте заглавки на отговора, за да разрешите кеширането
 res.setHeader(„Контрола на кеша“, 's-maxage=10, stale-while-revalidate');
// Върнете данни
 res.status(200).json (данни);
}

Този пример дефинира крайна точка на API, която връща JSON отговор с някои данни.

Задаваме заглавките на реакцията с помощта на res.setHeader техника за активиране на резервиране за 10 секунди с помощта на s-максимална възраст граница. Това показва, че CDN може да кешира отговора за до десет секунди, преди да изиска опресняване.

Ние също използваме stale-while-revalidate параметър, за да позволи на CDN да обслужва кеширан отговор, който е изтекъл, докато във фонов режим се прави нов отговор. Дори ако кешираният отговор е изтекъл, CDN ще генерира нов и винаги ще изпраща отговор.

Кеширането на отговорите на Edge функции е отличен начин за ускоряване на уеб приложението и намаляване на броя на заявките към сървъра. Можете да гарантирате на потребителите по-бързи и по-отзивчиви уебсайтове, като кеширате отговорите за предварително определено време.

Edge функциите са невероятно мощна характеристика на Next.js

Поддръжката на Next.js за Edge функции е завладяваща функция, която ви позволява да изпълнявате персонализирани функции без сървър по-близо до крайния потребител в периферната мрежа.

Има няколко начина, по които можете да използвате функциите на Edge за подобряване на уеб приложенията: A/B тестване, кеширане на отговор, динамично маршрутизиране, извличане на данни, удостоверяване.

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