Čo sú funkcie okraja v Next.js? 5 spôsobov, ako ich môžete použiť

Next.js je populárny open-source framework na vývoj vykresľovaných aplikácií React na strane servera. Vďaka jednoduchosti použitia a prispôsobivosti ho môžete použiť na vytváranie zložitých webových aplikácií.

Funkcie Edge sú jednou z najzaujímavejších funkcií Next.js. Prečítajte si o funkciách Edge a piatich spôsoboch ich použitia v Next.js.

Čo sú funkcie okrajov?

Výkonná funkcia Edge funkcie Next.js vám umožňuje spúšťať vlastné funkcie bez servera bližšie ku koncovému používateľovi v okrajovej sieti. To znamená, že kód beží na serveroch, ktoré sa nachádzajú geograficky bližšie ku klientovi, čo prináša rýchlejší a vyšší výkon vo webových aplikáciách.

Funkcie Edge môžu zmeniť požiadavku alebo odpoveď, načítať údaje, overiť a ďalšie.

Funkcie Edge sa spúšťajú okamžite. Keďže skracujú čas potrebný na načítanie údajov a vykreslenie stránok, môžete použiť funkcie Edge na zlepšenie výkonu webu a používateľského zážitku.

Moderné gadgety a gadgety novej generácie potrebujú edge computing pretože je spoľahlivejšia a bezpečnejšia ako cloud computing a využíva funkcie Edge. Okrem toho je schopnejší a flexibilnejší ako samotný počítač na zariadení.

Tu je niekoľko spôsobov, ako môžete použiť funkcie Edge v Next.js.

1. Dynamické smerovanie

Jedným zo spôsobov, ako môžete použiť funkcie Edge v Next.js, je dynamické smerovanie. Môžete definovať a spravovať vlastné trasy na základe dynamických údajov, ako sú parametre dotazu alebo hlavičky požiadaviek.

Je to cenné na vytváranie prispôsobiteľnejších a dynamickejších webových aplikácií, ktoré sa zaoberajú rôznymi požiadavkami.

Funkcie Edge Next.js môžete použiť na implementáciu dynamického smerovania nasledujúcim spôsobom:

// pages/api/[slug].js
exportpredvolenáfunkciupsovod(req, req) {
konšt { slug } = req.query;
ak (slimák 'asi') {
 res.status(200).odoslať('Toto je stránka s informáciami!');
 } inakak (slimák 'kontakt') {
 res.status(200).odoslať('Toto je kontaktná stránka!');
 } inak {
 res.status(404).odoslať('Stránka nenájdená.');
 }
}

Tento príklad ukazuje obsah súboru s názvom [slug.js] v stránky/api adresár na definovanie vlastnej trasy s dynamickými údajmi. Hranica slug sa potom odstráni z dotazu požiadavky pomocou req.query, ktorá vám umožní vysporiadať sa s požiadavkami výrazne založenými na hodnote slimák.

Napríklad, ak používateľ prejde na http://example.com/api/about, parameter slug bude nastavený na o. The psovod funkcia spustí príslušný blok kódu a zobrazí správu "Toto je stránka o!"

Ak klient navštívi http://example.com/api/contact, psovod vráti správu "Toto je kontaktná stránka!"

Pomocou funkcií Edge na dynamické smerovanie môžu vývojári vytvárať prispôsobivejšie a dynamickejšie webové aplikácie, ktoré dokážu spracovať rôzne požiadavky na základe meniacich sa údajov.

2. Načítavanie údajov

V Next.js je jedným z bežných prípadov použitia funkcií Edge načítanie údajov. Presunutím údajov na okraj môžete znížiť zaťaženie servera a zvýšiť výkon webovej aplikácie.

Funkcie Edge Next.js môžu vykonávať načítanie údajov, ako je znázornené v tomto príklade:

// pages/api/users/[id].js
exportpredvolenáasyncfunkciupsovod(req, req) {
konšt { id } = req.query;
// Získanie používateľských údajov z rozhrania API tretej strany
konšt odpoveď = čakať priniesť (` https://api.example.com/users/${id}`);
konšt užívateľ = čakať response.json();
// Vráti údaje používateľa
 res.status(200.json (používateľ);
}

Tento príklad definuje koncový bod API, ktorý používa id parameter dotazu na získanie používateľských údajov z rozhrania API tretej strany. Pomocou aport môžete odoslať požiadavku do API a potom čakať na odpoveď s kľúčovým slovom wait.

Kód potom extrahuje informácie JSON volaním response.json() a uloží ho do premennej. Nakoniec používa json metóda odpovede na formátovanie údajov odpovede ako JSON.

Načítanie údajov funkcie okraja je výkonná technika, ktorá vám umožňuje načítať údaje na hranici, čím sa znižuje zaťaženie servera a zlepšuje sa výkon webovej aplikácie.

Môžete tiež znížiť nečinnosť dopytu a poskytnúť klientom rýchlejšie a citlivejšie stránky získavaním informácií z externého programovacieho rozhrania na okraji.

3. Používa sa pri autentifikácii

Implementáciou pravidiel riadenia prístupu na hranici môžete zlepšiť bezpečnosť svojej webovej aplikácie a znížiť riziko neoprávneného prístupu k citlivým údajom.

Ako príklad si predstavte funkciu, ktorá kontroluje stav autentifikácie klienta a vracia ho späť do odpovede. Tu je prehľad overenia, ktoré zahŕňa možnosti Edge v Next.js:

// pages/api/auth.js
exportpredvolená (req, res) => {
konšt { isAuthenticated } = req.cookies;
ak (isAuthenticated) {
 res.status(200.json({ správu: „Ste overený“ });
 } inak {
 res.status(401.json({ správu: 'Nie ste overený' });
 }
}

Na tomto obrázku funkcia Edge skúma súbor cookie na overovací token a ak sa nájde, vygeneruje odpoveď JSON s informáciami o používateľovi.

4. A/B test

Ďalším spôsobom, ako môžete využiť funkcie Edge Next.js, je optimalizácia výkonu webovej aplikácie pomocou A/B testovania. Pomocou A/B testovania môžete porovnať rôzne verzie webovej lokality alebo aplikácie a určiť, ktorá z nich funguje lepšie.

Ilustrácia toho, ako možno použiť funkcie Edge Next.js na vykonanie A/B testovania, je nasledovná:

// pages/api/abtest.js
konšt varianty = ['variantA', 'variantB'];
exportpredvolenáfunkciupsovod(req, req) {
konšt { userId } = req.query;
// Generovanie náhodného variantu pre používateľa
konšt variantIndex = Matematika.poschodie(Matematika.random() * varianty.dĺžka);
konšt variant = varianty[variantIndex];
// Uložte variant do súboru cookie
 res.setHeader(„Nastaviť súbor cookie“, `variant=${variant}; Maximálny vek=604800;`);
// Vykreslí príslušný variant
ak (varianta 'variantA') {
 res.status(200).odoslať("Vitajte vo variante A!");
 } inak {
 res.status(200).odoslať('Vitajte vo variante B!');
 }
}

Tento kód demonštruje koncový bod rozhrania API, ktorý spúšťa test A/B pre dve jedinečné variácie stránky lokality. Používa sa Math.random() spôsob na vytvorenie náhodného variantu pre používateľa a jeho uloženie do súboru cookie s príponou res.setHeader metóda. To umožňuje kódu zabezpečiť, aby klient videl rovnakú variáciu pri budúcich návštevách.

Kód potom používa varianta hodnotu súboru cookie na vykreslenie vhodného variantu. Zobrazí hlásenie s uvedením, ktorý variant zvolil.

Pomocou funkcií Edge môžu vývojári použiť výkonný nástroj nazývaný A/B testovanie na porovnanie rôznych verzií aplikácie alebo webovej stránky, aby zistili, ktorá z nich funguje lepšie. Náhodným priraďovaním používateľov k rôznym variantom môžete zhromažďovať údaje o správaní používateľov a zlepšovať výkon webovej aplikácie a používateľskú skúsenosť.

5. Ukladanie odpovedí do vyrovnávacej pamäte

Ukladanie reakcií je ďalší spôsob, ako môžete využiť možnosti Edge v Next.js na zefektívnenie vykonávania webu. Umožňuje nám to uchovávať reakcie na určitý čas, aby sme znížili počet požiadaviek na server a pracovali na rýchlosti webovej aplikácie.

Tu je ilustrácia toho, ako môžete vykonať ukladanie reakcií pomocou Edge Capabilities v Next.js:

// pages/api/data.js
konšt údaje = { názov: 'John Doe', Vek: 30 };
exportpredvolenáfunkciupsovod(req, req) {
// Nastavenie hlavičiek odpovedí na povolenie ukladania do vyrovnávacej pamäte
 res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate');
// Vrátiť údaje
 res.status(200.json (údaje);
}

Tento príklad definuje koncový bod API, ktorý vracia odpoveď JSON s niektorými údajmi.

Hlavičky reakcií nastavíme pomocou res.setHeader technika umožňujúca rezerváciu na 10 sekúnd pomocou s-max-vek hranica. To znamená, že CDN môže uložiť odpoveď do vyrovnávacej pamäte až desať sekúnd, kým bude vyžadovať obnovenie.

Používame tiež stale-while-revalidate parameter, ktorý umožní CDN obsluhovať odpoveď uloženú vo vyrovnávacej pamäti, ktorej platnosť vypršala, zatiaľ čo sa na pozadí vytvára nová odpoveď. Aj keď platnosť odpovede uloženej vo vyrovnávacej pamäti vypršala, CDN vygeneruje novú a vždy odošle odpoveď.

Ukladanie odozvy funkcií Edge do vyrovnávacej pamäte je vynikajúci spôsob, ako zrýchliť webovú aplikáciu a znížiť počet požiadaviek na server. Používateľom môžete zaručiť rýchlejšie a pohotovejšie webové stránky ukladaním odpovedí do vyrovnávacej pamäte na vopred stanovený čas.

Funkcie Edge sú neuveriteľne výkonnou funkciou Next.js

Podpora Next.js pre funkcie Edge je presvedčivá funkcia, ktorá vám umožňuje spúšťať vlastné funkcie bez servera bližšie ku koncovému používateľovi v okrajovej sieti.

Existuje niekoľko spôsobov, ako môžete použiť funkcie Edge na zlepšenie webových aplikácií: testovanie A/B, ukladanie odpovedí do vyrovnávacej pamäte, dynamické smerovanie, načítanie údajov, autentifikácia.

Používanie funkcií Edge vo vašej architektúre môže zlepšiť skúsenosti vašich klientov a viesť k rýchlejším a citlivejším webovým aplikáciám.