Mik azok az Edge funkciók a Next.js-ben? 5 mód a használatukra

A Next.js egy népszerű, nyílt forráskódú keretrendszer szerveroldali renderelt React alkalmazások fejlesztésére. Könnyű kezelhetőségének és alkalmazkodóképességének köszönhetően összetett webalkalmazások készítésére is használható.

Az Edge funkciók a Next.js egyik legizgalmasabb funkciója. Ismerje meg az Edge-függvényeket és az ötféle használati módot a Next.js-ben.

Mik azok az élfunkciók?

A Next.js erőteljes Edge funkciói lehetővé teszik, hogy a peremhálózaton a végfelhasználóhoz közelebb futtasson egyéni szerver nélküli funkciókat. Ez azt jelenti, hogy a kód az ügyfélhez földrajzilag közelebb található szervereken fut, ami gyorsabb és nagyobb teljesítményt biztosít a webalkalmazásokban.

Az Edge funkciók módosíthatják a kérést vagy választ, lekérhetik az adatokat, hitelesíthetik és így tovább.

Az Edge funkciók azonnal futnak. Mivel csökkentik az adatok betöltéséhez és az oldalak megjelenítéséhez szükséges időt, az Edge funkciók segítségével javíthatja a webes teljesítményt és a felhasználói élményt.

Modern és új generációs kütyükre van szükség élszámítás mert megbízhatóbb és biztonságosabb, mint felhő alapú számítástechnika és kihasználja az Edge funkciókat. Ezen felül képesebb és rugalmasabb, mint az eszközön végzett egyedüli számítás.

Íme néhány módszer az Edge funkciók használatára a Next.js-ben.

1. Dinamikus útválasztás

Az Edge függvények használatának egyik módja a Next.js-ben a dinamikus útválasztás. Egyéni útvonalakat határozhat meg és kezelhet dinamikus adatok, például lekérdezési paraméterek vagy kérésfejlécek alapján.

Ez értékes az alkalmazkodóbb és dinamikusabb webalkalmazások elkészítéséhez, amelyek különféle kéréseket kezelnek.

A Next.js Edge funkcióival dinamikus útválasztást valósíthat meg a következő módon:

// pages/api/[slug].js
exportalapértelmezettfunkciókezelő(req, res) {
const { slug } = req.query;
ha (meztelen csiga 'ról ről') {
 res.status(200).Küld('Ez a róluk szóló oldal!');
 } másha (meztelen csiga 'kapcsolatba lépni') {
 res.status(200).Küld('Ez a kapcsolatfelvételi oldal!');
 } más {
 res.status(404).Küld('Az oldal nem található.');
 }
}

Ez a példa egy nevű fájl tartalmát mutatja be [slug.js] ban,-ben oldalak/api könyvtárat egyéni útvonal meghatározásához dinamikus adatokkal. A slug-határ ezután eltávolításra kerül a kérés lekérdezéséből a segítségével req.query, amely lehetővé teszi, hogy megbirkózzon olyan igényekkel, amelyek erőteljesen az értékén alapulnak meztelen csiga.

Például, ha egy felhasználó a http://example.com/api/about, a slug paraméter értéke lesz ról ről. A kezelő funkció lefuttatja a megfelelő kódblokkot, és megjeleníti az "Ez a tájékoztató oldal!"

Ha az ügyfél meglátogatja http://example.com/api/contact, kezelő üzenetet küldi vissza: "Ez a kapcsolati oldal!"

A dinamikus útválasztás Edge funkcióival a fejlesztők rugalmasabb és dinamikusabb webalkalmazásokat hozhatnak létre, amelyek képesek kezelni a változó adatokon alapuló különféle kéréseket.

2. Adatlekérés

A Next.js-ben az Edge-függvények egyik gyakori felhasználási esete az adatlekérés. Csökkentheti a kiszolgáló terhelését, és növelheti a webalkalmazás teljesítményét az adatok szélére hozásával.

A Next.js Edge-függvényei képesek adatlekérést végezni, amint az ebben a példában látható:

// pages/api/users/[id].js
exportalapértelmezettasyncfunkciókezelő(req, res) {
const { id } = req.query;
// Felhasználói adatok lekérése egy harmadik fél API-ból
const válasz = várja fetch(` https://api.example.com/users/${id}`);
const felhasználó = várja válasz.json();
// A felhasználói adatok visszaadása
 res.status(200.json (felhasználó);
}

Ez a példa egy API-végpontot határoz meg, amely a id lekérdezési paraméter a felhasználói adatok lekéréséhez egy harmadik fél API-ból. Használni a elhozni módszerrel kérést küldhet az API-nak, majd megvárhatja a választ a await kulcsszóval.

A kód ezután hívás útján kibontja a JSON-információkat response.json() és egy változóban tárolja. Végül a json a válasz módszere a válaszadatok JSON formátumban történő formázásához.

Az Edge függvény adatlekérése egy hatékony technika, amely lehetővé teszi az adatok lekérését a peremen, csökkentve a szerver terhelését és javítva a webalkalmazások teljesítményét.

Hasonlóképpen csökkentheti a kereslet tétlenségét, és gyorsabb, gyorsabban reagáló oldalakat biztosíthat az ügyfeleknek, ha információkat szerez egy külső programozói felületről a szélén.

3. Hitelesítésben használatos

A hozzáférés-vezérlési szabályok szélső bevezetésével javíthatja webalkalmazása biztonságát, és csökkentheti az érzékeny adatokhoz való jogosulatlan hozzáférés kockázatát.

Példaként vegyünk egy olyan függvényt, amely ellenőrzi az ügyfél hitelesítési állapotát, és visszaadja azt a válaszban. Íme a Next.js Edge képességeit magában foglaló ellenőrzés vázlata:

// pages/api/auth.js
exportalapértelmezett (req, res) => {
const { isAuthenticated } = req.cookies;
ha (hitelesített) {
 res.status(200).json({ üzenet: 'hitelesítve vagy' });
 } más {
 res.status(401).json({ üzenet: "Nem vagy hitelesítve" });
 }
}

Ezen az ábrán az Edge funkció megvizsgálja a cookie-t hitelesítési jogkivonat keresésére, és ha talál, JSON-választ generál a felhasználó adataival.

4. Az A/B teszt

A Next.js Edge funkcióinak egy másik módja az, hogy A/B teszteléssel optimalizálja a webalkalmazások teljesítményét. Összehasonlíthatja egy webhely vagy alkalmazás különböző verzióit A/B teszteléssel, hogy meghatározza, melyik teljesít jobban.

A következő szemlélteti, hogy a Next.js Edge funkciói hogyan használhatók A/B teszteléshez:

// pages/api/abtest.js
const változatok = ["változatA", "változatB"];
exportalapértelmezettfunkciókezelő(req, res) {
const { userId } = req.query;
// Véletlenszerű változat létrehozása a felhasználó számára
const variánsIndex = Math.padló(Math.random() * változatok.hossz);
const variáns = változatok[variánsIndex];
// Tárolja a változatot cookie-ban
 res.setHeader("Set-Cookie", `variáns=${variant}; Max-Age=604800;`);
// A megfelelő változat megjelenítése
ha (változat "változatA") {
 res.status(200).Küld("Üdvözöljük az A változatban!");
 } más {
 res.status(200).Küld("Üdvözöljük a B változatban!");
 }
}

Ez a kód egy API-interfész-végpontot mutat be, amely A/B-tesztet futtat a webhelyoldal két egyedi változatára vonatkozóan. Használja a Math.random() módszerrel véletlenszerű változatot hozhat létre a felhasználó számára, és azt egy cookie-ban tárolja a res.setHeader módszer. Ez lehetővé teszi a kód számára, hogy az ügyfél ugyanazt a változatot lássa a jövőbeli látogatások során.

A kód ezután a változat a cookie értéke a megfelelő változat megjelenítéséhez. Megjelenik egy üzenet, amely jelzi, hogy melyik változatot választotta.

Az Edge függvények használatával a fejlesztők az A/B tesztelés nevű hatékony eszközzel összehasonlíthatják egy alkalmazás vagy weboldal különböző verzióit, hogy megtudják, melyik teljesít jobban. Adatokat gyűjthet a felhasználói viselkedésről, és javíthatja a webalkalmazás teljesítményét és felhasználói élményét, ha véletlenszerűen rendeli hozzá a felhasználókat különböző változatokhoz.

5. A válaszok gyorsítótárazása

A reakciótárolás egy másik módja annak, hogy a Next.js Edge-képességeit használhassa a webes végrehajtás egyszerűsítésére. Lehetővé teszi számunkra, hogy egy bizonyos ideig megtartsuk a reakciókat, hogy csökkentsük a szerverhez intézett kérések számát, és javítsuk a webalkalmazás sebességét.

Íme egy példa arra, hogyan végezhet reakciótárolást az Edge Capabilities segítségével a Next.js-ben:

// pages/api/data.js
const adat = { név: 'Gipsz Jakab', kor: 30 };
exportalapértelmezettfunkciókezelő(req, res) {
// A válaszfejlécek beállítása a gyorsítótárazás engedélyezéséhez
 res.setHeader("Gyorsítótár-vezérlés", 's-maxage=10, elavult, miközben újraellenőrzi');
// Adatok visszaküldése
 res.status(200).json (adatok);
}

Ez a példa egy API-végpontot határoz meg, amely JSON-választ ad vissza bizonyos adatokkal.

A reakciófejléceket a segítségével állítjuk be res.setHeader technikával, amely lehetővé teszi a 10 másodperces foglalást a s-max-életkor határ. Ez azt jelzi, hogy a CDN legfeljebb tíz másodpercig képes gyorsítótárban tárolni a választ, mielőtt frissítést igényelne.

Mi is használjuk a elavult, miközben újra érvényesít paraméter, amely lehetővé teszi, hogy a CDN kiszolgáljon egy lejárt gyorsítótárazott választ, miközben új válasz készül a háttérben. Még ha a gyorsítótárazott válasz lejárt is, a CDN újat generál, és mindig választ küld.

Az Edge függvények válaszgyorsítótárazása kiváló módja annak, hogy felgyorsítsa a webalkalmazást és csökkentse a szerver felé irányuló kérések számát. A válaszok előre meghatározott ideig gyorsítótárazásával gyorsabb és rugalmasabb webhelyeket garantálhat a felhasználók számára.

Az élfunkciók a Next.js hihetetlenül hatékony funkciói

A Next.js Edge-funkciók támogatása egy lenyűgöző szolgáltatás, amely lehetővé teszi, hogy egyéni, kiszolgáló nélküli funkciókat a végfelhasználóhoz közelebb futtasson a peremhálózaton.

Számos módja van az Edge funkcióknak a webalkalmazások fejlesztésére: A/B tesztelés, válaszgyorsítótár, dinamikus útválasztás, adatlekérés, hitelesítés.

Az Edge képességeinek az architektúrában való használata javíthatja az ügyfelek élményét, és gyorsabb, gyorsabban reagáló webalkalmazásokat eredményezhet.