Hvad er Edge-funktioner i Next.js? 5 måder du kan bruge dem på

Next.js er en populær open source-ramme til udvikling af server-side-renderede React-applikationer. Takket være dens brugervenlighed og tilpasningsevne kan du bruge den til at skabe komplekse webapplikationer.

Edge-funktioner er en af ​​Next.js' mest spændende funktioner. Lær om Edge-funktioner og fem måder at bruge dem på i Next.js.

Hvad er Edge-funktioner?

Next.js' kraftfulde Edge-funktionsfunktion lader dig køre brugerdefinerede serverløse funktioner tættere på slutbrugeren på edge-netværket. Dette indebærer, at koden kører på servere fundet geografisk tættere på klienten, hvilket giver hurtigere og mere ydeevne i webapplikationer.

Edge-funktioner kan ændre anmodningen eller svaret, hente data, godkende og mere.

Edge-funktioner kører med det samme. Da de reducerer den tid, det tager at indlæse data og gengive sider, kan du bruge Edge-funktioner til at forbedre web-ydeevne og brugeroplevelse.

Moderne og næste generations gadgets har brug for edge computing fordi det er mere pålideligt og sikkert end skyen og udnytter Edge-funktioner. Derudover er det mere kapabelt og fleksibelt end at regne alene på enheden.

Her er nogle måder, du kan bruge Edge-funktioner på i Next.js.

1. Dynamisk routing

En måde du kan bruge Edge-funktioner i Next.js på er gennem dynamisk routing. Du kan definere og administrere tilpassede ruter baseret på dynamiske data, såsom forespørgselsparametre eller anmodningsoverskrifter.

Dette er værdifuldt for at gøre mere tilpasningsdygtige og dynamiske webapplikationer, der håndterer forskellige anmodninger.

Du kan bruge Next.js's Edge-funktioner til at implementere dynamisk routing på følgende måde:

// pages/api/[slug].js
eksportStandardfungerehandler(kræve, res) {
konst { slug } = req.query;
hvis (snegl 'om') {
 res.status(200).sende('Dette er om siden!');
 } andethvis (snegl 'kontakt') {
 res.status(200).sende('Dette er kontaktsiden!');
 } andet {
 res.status(404).sende('Siden blev ikke fundet.');
 }
}

Dette eksempel viser indholdet af en fil med navn [slug.js] i sider/api bibliotek for at definere en brugerdefineret rute med dynamiske data. Slug-grænsen fjernes derefter fra anmodningsforespørgslen vha forespørgsel, som lader dig håndtere krav stærkt baseret på værdien af snegl.

For eksempel, hvis en bruger går til http://example.com/api/about, slug-parameteren indstilles til om. Det handler funktionen vil køre den relevante kodeblok og vise meddelelsen "Dette er om siden!"

Hvis kunden kommer på besøg http://example.com/api/contact, handler vil returnere beskeden "Dette er kontaktsiden!"

Ved at bruge Edge-funktioner til dynamisk routing kan udviklere skabe mere tilpasningsdygtige og dynamiske webapplikationer, der kan håndtere forskellige anmodninger baseret på skiftende data.

2. Datahentning

I Next.js er en almindelig brugssag for Edge-funktioner datahentning. Du kan reducere belastningen på serveren og øge webapplikationens ydeevne ved at bringe data til kanten.

Next.js's Edge-funktioner kan udføre datahentning, som vist i dette eksempel:

// pages/api/users/[id].js
eksportStandardasynkronfungerehandler(kræve, res) {
konst { id } = req.query;
// Hent brugerdata fra en tredjeparts API
konst svar = vente hente(` https://api.example.com/users/${id}`);
konst bruger = vente response.json();
// Returner brugerdataene
 res.status(200).json (bruger);
}

Dette eksempel definerer et API-slutpunkt, der bruger id forespørgselsparameter for at hente brugerdata fra en tredjeparts API. Bruger hente metode, kan du sende en anmodning til API'et og derefter vente på et svar med nøgleordet await.

Koden udtrækker derefter JSON-informationen ved at ringe response.json() og gemmer den i en variabel. Endelig bruger den json metoden for svaret til at formatere svardataene som JSON.

Kantfunktionsdatahentning er en kraftfuld teknik, der giver dig mulighed for at hente data ved kanten, hvilket reducerer serverbelastningen og forbedrer webapplikationens ydeevne.

Du kan ligeledes nedbringe efterspørgslens tomgang og give kunderne hurtigere og mere responsive sider ved at få information fra en ekstern programmeringsgrænseflade på kanten.

3. Brugt i godkendelse

Ved at implementere adgangskontrolregler på kanten, kan du forbedre din webapps sikkerhed og reducere risikoen for uautoriseret adgang til følsomme data.

Som et eksempel kan du overveje en funktion, der kontrollerer en klients godkendelsestilstand og ekko den tilbage i svaret. Her er en oversigt over verifikation, der involverer Edge-funktioner i Next.js:

// pages/api/auth.js
eksportStandard (req, res) => {
konst { isAuthenticated } = req.cookies;
hvis (er Authenticated) {
 res.status(200).json({ besked: 'Du er godkendt' });
 } andet {
 res.status(401).json({ besked: 'Du er ikke godkendt' });
 }
}

I denne illustration undersøger Edge-funktionen cookien for et godkendelsestoken og genererer, hvis den findes, et JSON-svar med brugerens oplysninger.

4. A/B-testen

En anden måde, du kan bruge Next.js's Edge-funktioner på, er at optimere en webapplikations ydeevne ved hjælp af A/B-test. Du kan sammenligne forskellige versioner af et websted eller en applikation ved hjælp af A/B-test for at afgøre, hvilken der klarer sig bedst.

En illustration af, hvordan Next.js's Edge-funktioner kan bruges til at udføre A/B-test, er som følger:

// pages/api/abtest.js
konst varianter = ['variantA', 'variantB'];
eksportStandardfungerehandler(kræve, res) {
konst { userId } = req.query;
// Generer en tilfældig variant til brugeren
konst variantIndex = Matematik.etage(Matematik.random() * variants.length);
konst variant = varianter[variantIndex];
// Gem varianten i en cookie
 res.setHeader('Set-Cookie', `variant=${variant}; Max-Alder=604800;`);
// Gengiv den tilsvarende variant
hvis (variant 'variantA') {
 res.status(200).sende('Velkommen til variant A!');
 } andet {
 res.status(200).sende('Velkommen til variant B!');
 }
}

Denne kode demonstrerer et API-grænsefladeslutpunkt, der kører en A/B-test for to unikke varianter af en webstedsside. Den bruger Math.random() metode til at skabe en tilfældig variant til brugeren og gemmer den i en cookie med res.setHeader metode. Dette gør det muligt for koden at sikre, at klienten ser den samme variation ved fremtidige besøg.

Koden bruger derefter variant cookiens værdi for at gengive den passende variant. Den viser en meddelelse, der angiver, hvilken variant den valgte.

Ved at bruge Edge-funktioner kan udviklere bruge et kraftfuldt værktøj kaldet A/B-test til at sammenligne forskellige versioner af en applikation eller webside for at se, hvilken der klarer sig bedst. Du kan indsamle data om brugeradfærd og forbedre webapplikationens ydeevne og brugeroplevelse ved tilfældigt at tildele brugere til forskellige varianter.

5. Caching svar

Reaktionslagring er en anden måde, hvorpå du kan bruge Edge-funktioner i Next.js til at strømline webudførelse. Det giver os mulighed for at opbevare reaktioner i et bestemt tidsrum for at reducere antallet af anmodninger til serveren og arbejde på hastigheden af ​​webapplikationen.

Her er en illustration af, hvordan du kan udføre reaktionslagring med Edge Capabilities i Next.js:

// pages/api/data.js
konst data = { navn: 'John Doe', alder: 30 };
eksportStandardfungerehandler(kræve, res) {
// Indstil svaroverskrifter for at aktivere caching
 res.setHeader('Cache-kontrol', 's-maxage=10, stale-while-revalidate');
// Returner data
 res.status(200).json (data);
}

Dette eksempel definerer et API-slutpunkt, der returnerer et JSON-svar med nogle data.

Vi indstiller reaktionsoverskrifterne ved hjælp af res.setHeader teknik til at muliggøre reservation i 10 sekunder ved hjælp af s-max-alder grænse. Dette indikerer, at CDN kan cache svaret i op til ti sekunder, før det kræver en opdatering.

Vi bruger også forældet-mens-genvaliderer parameter for at lade CDN'et vise et cachelagret svar, der er udløbet, mens der laves et nyt svar i baggrunden. Selvom det cachelagrede svar er udløbet, vil CDN generere et nyt og vil altid sende et svar.

Kantfunktions svarcache er en glimrende måde at fremskynde webapplikationen og reducere antallet af anmodninger til serveren. Du kan garantere brugerne hurtigere og mere responsive websteder ved at cache svar i en forudbestemt tid.

Edge-funktioner er en utrolig kraftfuld funktion i Next.js

Next.js' understøttelse af Edge-funktioner er en overbevisende funktion, der lader dig køre brugerdefinerede, serverløse funktioner tættere på slutbrugeren på edge-netværket.

Der er flere måder, hvorpå du kan bruge Edge-funktioner til at forbedre webapplikationer: A/B-test, svarcache, dynamisk routing, datahentning, godkendelse.

Brug af Edge-funktioner i din arkitektur kan forbedre dine kunders oplevelse og resultere i hurtigere, mere responsive webapplikationer.