Vad är Edge-funktioner i Next.js? 5 sätt du kan använda dem

Next.js är ett populärt ramverk med öppen källkod för att utveckla React-applikationer som renderats på serversidan. Tack vare dess användarvänlighet och anpassningsförmåga kan du använda den för att skapa komplexa webbapplikationer.

Edge-funktioner är en av Next.js mest spännande funktioner. Lär dig mer om Edge-funktioner och fem sätt att använda dem i Next.js.

Vad är Edge-funktioner?

Next.js kraftfulla Edge-funktioner låter dig köra anpassade serverlösa funktioner närmare slutanvändaren på edge-nätverket. Detta innebär att koden körs på servrar som hittas geografiskt närmare klienten, vilket ger snabbare och bättre prestanda i webbapplikationer.

Edge-funktioner kan ändra begäran eller svaret, hämta data, autentisera och mer.

Edge-funktioner körs omedelbart. Eftersom de minskar tiden det tar att ladda data och rendera sidor kan du använda Edge-funktioner för att förbättra webbprestanda och användarupplevelse.

Moderna och nästa generations prylar behöver kantberäkning eftersom det är mer pålitligt och säkert än molntjänster och utnyttjar Edge-funktioner. Dessutom är det mer kapabelt och flexibelt än att bara använda datorn på enheten.

Här är några sätt du kan använda Edge-funktioner i Next.js.

1. Dynamisk routing

Ett sätt du kan använda Edge-funktioner i Next.js är genom dynamisk routing. Du kan definiera och hantera anpassade rutter baserat på dynamiska data, såsom frågeparametrar eller förfrågningsrubriker.

Detta är värdefullt för att göra mer anpassningsbara och dynamiska webbapplikationer som hanterar olika förfrågningar.

Du kan använda Next.js's Edge-funktioner för att implementera dynamisk routing på följande sätt:

// pages/api/[slug].js
exporterastandardfungerahanterare(req, res) {
konst { slug } = req.query;
om (snigel 'handla om') {
 res.status(200).skicka("Det här är om sidan!");
 } annanom (snigel 'Kontakt') {
 res.status(200).skicka("Det här är kontaktsidan!");
 } annan {
 res.status(404).skicka('Sidan hittas inte.');
 }
}

Det här exemplet visar innehållet i en fil med namnet [slug.js] i sidor/api katalog för att definiera en anpassad rutt med dynamiska data. Slug-gränsen tas sedan bort från förfrågningsfrågan med hjälp av req.query, som låter dig hantera krav som kraftfullt bygger på värdet av snigel.

Till exempel om en användare går till http://example.com/api/about, slug-parametern kommer att ställas in på handla om. De hanterare funktionen kör lämpligt kodblock och visar meddelandet "Detta är om sidan!"

Om kunden kommer på besök http://example.com/api/contact, hanterare kommer att returnera meddelandet "Detta är kontaktsidan!"

Med hjälp av Edge-funktioner för dynamisk routing kan utvecklare skapa mer anpassningsbara och dynamiska webbapplikationer som kan hantera olika förfrågningar baserat på förändrad data.

2. Datahämtning

I Next.js är ett vanligt användningsfall för Edge-funktioner datahämtning. Du kan minska belastningen på servern och öka webbapplikationens prestanda genom att föra data till kanten.

Next.js's Edge-funktioner kan utföra datahämtning, som visas i det här exemplet:

// pages/api/users/[id].js
exporterastandardasynkronfungerahanterare(req, res) {
konst { id } = req.query;
// Hämta användardata från ett tredjeparts-API
konst svar = vänta hämta(` https://api.example.com/users/${id}`);
konst användare = vänta response.json();
// Returnera användardata
 res.status(200).json (användare);
}

Det här exemplet definierar en API-slutpunkt som använder id frågeparameter för att hämta användardata från ett tredjeparts-API. Använda hämta metoden kan du skicka en begäran till API: t och sedan vänta på ett svar med nyckelordet await.

Koden extraherar sedan JSON-informationen genom att anropa response.json() och lagrar den i en variabel. Slutligen använder den json metod för svaret för att formatera svarsdata som JSON.

Kantfunktionsdatahämtning är en kraftfull teknik som låter dig hämta data vid kanten, vilket minskar serverbelastningen och förbättrar webbapplikationens prestanda.

Du kan på samma sätt minska efterfrågan på tomgång och ge kunderna snabbare och mer responsiva sidor genom att få information från ett utomstående programmeringsgränssnitt vid kanten.

3. Används i autentisering

Genom att implementera åtkomstkontrollregler på kanten kan du förbättra din webbapps säkerhet och minska risken för obehörig åtkomst till känslig data.

Som ett exempel, överväga en funktion som kontrollerar en klients autentiseringstillstånd och ekar det tillbaka i svaret. Här är en översikt över verifiering som involverar Edge-funktioner i Next.js:

// pages/api/auth.js
exporterastandard (req, res) => {
konst { isAuthenticated } = req.cookies;
om (är autentiserad) {
 res.status(200).json({ meddelande: "Du är autentiserad" });
 } annan {
 res.status(401).json({ meddelande: "Du är inte autentiserad" });
 }
}

I den här illustrationen undersöker Edge-funktionen cookien efter en autentiseringstoken och, om den hittas, genererar den ett JSON-svar med användarens information.

4. A/B-testet

Ett annat sätt du kan använda Next.js's Edge-funktioner är att optimera en webbapplikations prestanda med hjälp av A/B-testning. Du kan jämföra olika versioner av en webbplats eller applikation med A/B-testning för att avgöra vilken som presterar bäst.

En illustration av hur Next.js Edge-funktioner kan användas för att utföra A/B-tester är följande:

// pages/api/abtest.js
konst varianter = ['variantA', 'variantB'];
exporterastandardfungerahanterare(req, res) {
konst { userId } = req.query;
// Skapa en slumpmässig variant för användaren
konst variantIndex = Matematik.golv(Matematik.random() * variants.length);
konst variant = varianter[variantIndex];
// Lagra varianten i en kaka
 res.setHeader("Set-Cookie", `variant=${variant}; Max-Age=604800;`);
// Gör motsvarande variant
om (variant 'variantA') {
 res.status(200).skicka("Välkommen till variant A!");
 } annan {
 res.status(200).skicka("Välkommen till variant B!");
 }
}

Den här koden visar en API-gränssnittsslutpunkt som kör ett A/B-test för två unika varianter av en webbplatssida. Den använder Math.random() metod för att skapa en slumpmässig variant för användaren och lagra den i en cookie med res.setHeader metod. Detta gör att koden säkerställer att kunden ser samma variation vid framtida besök.

Koden använder sedan variant cookiens värde för att återge lämplig variant. Den visar ett meddelande som anger vilken variant den valt.

Med hjälp av Edge-funktioner kan utvecklare använda ett kraftfullt verktyg som kallas A/B-testning för att jämföra olika versioner av en applikation eller webbsida för att se vilken som presterar bäst. Du kan samla in data om användarbeteende och förbättra webbapplikationens prestanda och användarupplevelse genom att slumpmässigt tilldela användare till olika varianter.

5. Cachar svar

Reaktionslagring är ett annat sätt du kan använda Edge-funktioner i Next.js för att effektivisera webbexekveringen. Det tillåter oss att behålla reaktioner under en viss tid för att minska antalet förfrågningar till servern och arbeta med webbapplikationens hastighet.

Här är en illustration av hur du kan utföra reaktionslagring med Edge Capabilities i Next.js:

// pages/api/data.js
konst data = { namn: "John Doe", ålder: 30 };
exporterastandardfungerahanterare(req, res) {
// Ställ in svarsrubriker för att aktivera cachelagring
 res.setHeader("Cache-kontroll", 's-maxage=10, stale-while-revalidate');
// Returnera data
 res.status(200).json (data);
}

Det här exemplet definierar en API-slutpunkt som returnerar ett JSON-svar med vissa data.

Vi ställer in reaktionshuvudena med hjälp av res.setHeader teknik för att möjliggöra reservation i 10 sekunder med hjälp av s-max-ålder gräns. Detta indikerar att CDN kan cachelagra svaret i upp till tio sekunder innan det kräver en uppdatering.

Vi använder också inaktuella-medan-förnya parameter för att låta CDN: n visa ett cachat svar som har löpt ut medan ett nytt svar görs i bakgrunden. Även om det cachade svaret har löpt ut kommer CDN att generera ett nytt och kommer alltid att skicka ett svar.

Kantfunktionssvarscache är ett utmärkt sätt att snabba upp webbapplikationen och minska antalet förfrågningar till servern. Du kan garantera användarna snabbare och mer responsiva webbplatser genom att cachelagra svar under en förutbestämd tid.

Kantfunktioner är en otroligt kraftfull funktion hos Next.js

Next.js stöd för Edge-funktioner är en övertygande funktion som låter dig köra anpassade, serverlösa funktioner närmare slutanvändaren på edge-nätverket.

Det finns flera sätt som du kan använda Edge-funktioner för att förbättra webbapplikationer: A/B-testning, svarscache, dynamisk routing, datahämtning, autentisering.

Att använda Edge-funktioner i din arkitektur kan förbättra dina kunders upplevelse och resultera i snabbare, mer responsiva webbapplikationer.