Hva er Edge-funksjoner i Next.js? 5 måter du kan bruke dem på

Next.js er et populært rammeverk med åpen kildekode for utvikling av React-applikasjoner som er gjengitt på serversiden. Takket være dens brukervennlighet og tilpasningsevne, kan du bruke den til å lage komplekse webapplikasjoner.

Edge-funksjoner er en av Next.js sine mest spennende funksjoner. Lær om Edge-funksjoner og fem måter å bruke dem på i Next.js.

Hva er Edge-funksjoner?

Next.js sin kraftige Edge-funksjon lar deg kjøre tilpassede serverløse funksjoner nærmere sluttbrukeren på edge-nettverket. Dette innebærer at koden kjører på servere funnet geografisk nærmere klienten, noe som gir raskere og mer ytelse i webapplikasjoner.

Edge-funksjoner kan endre forespørselen eller svaret, hente data, autentisere og mer.

Edge-funksjoner kjøres umiddelbart. Siden de reduserer tiden det tar å laste inn data og gjengi sider, kan du bruke Edge-funksjoner for å forbedre nettytelsen og brukeropplevelsen.

Moderne og neste generasjons gadgets trenger kantberegning fordi den er mer pålitelig og sikker enn cloud computing og utnytter Edge-funksjoner. I tillegg er den mer kapabel og fleksibel enn å regne alene på enheten.

Her er noen måter du kan bruke Edge-funksjoner i Next.js.

1. Dynamisk ruting

En måte du kan bruke Edge-funksjoner i Next.js på er gjennom dynamisk ruting. Du kan definere og administrere tilpassede ruter basert på dynamiske data, for eksempel spørringsparametere eller forespørselshoder.

Dette er verdifullt for å lage mer tilpasningsdyktige og dynamiske webapplikasjoner som håndterer ulike forespørsler.

Du kan bruke Next.js's Edge-funksjoner til å implementere dynamisk ruting på følgende måte:

// pages/api/[slug].js
eksportmisligholdefunksjonhandler(krav, res) {
konst { slug } = req.query;
hvis (mordersnegle 'Om') {
 res.status(200).sende('Dette er om-siden!');
 } ellershvis (mordersnegle 'kontakt') {
 res.status(200).sende('Dette er kontaktsiden!');
 } ellers {
 res.status(404).sende('Side ikke funnet.');
 }
}

Dette eksemplet viser innholdet i en fil med navn [slug.js] i sider/api katalog for å definere en tilpasset rute med dynamiske data. Sluggrensen fjernes deretter fra forespørselsspørringen ved hjelp av forespørsel, som lar deg håndtere krav kraftig basert på verdien av mordersnegle.

For eksempel hvis en bruker går til http://example.com/api/about, slug-parameteren vil bli satt til Om. De handler funksjonen kjører den aktuelle kodeblokken og viser meldingen "Dette er om-siden!"

Hvis klienten kommer på besøk http://example.com/api/contact, handler vil returnere meldingen "Dette er kontaktsiden!"

Ved å bruke Edge-funksjoner for dynamisk ruting, kan utviklere lage mer tilpasningsdyktige og dynamiske webapplikasjoner som kan håndtere ulike forespørsler basert på endrede data.

2. Datahenting

I Next.js er en vanlig brukssak for Edge-funksjoner datahenting. Du kan redusere belastningen på serveren og øke nettapplikasjonens ytelse ved å bringe data til kanten.

Next.js's Edge-funksjoner kan utføre datahenting, som vist i dette eksemplet:

// pages/api/users/[id].js
eksportmisligholdeasynkronfunksjonhandler(krav, res) {
konst { id } = req.query;
// Hent brukerdata fra en tredjeparts API
konst svar = avvente hente(` https://api.example.com/users/${id}`);
konst bruker = avvente response.json();
// Returner brukerdataene
 res.status(200).json (bruker);
}

Dette eksemplet definerer et API-endepunkt som bruker id spørringsparameter for å hente brukerdata fra en tredjeparts API. Bruker hente metoden, kan du sende en forespørsel til API-en og deretter vente på et svar med await-nøkkelordet.

Koden trekker deretter ut JSON-informasjonen ved å ringe response.json() og lagrer den i en variabel. Til slutt bruker den json metoden for responsen for å formatere responsdataene som JSON.

Kantfunksjonsdatahenting er en kraftig teknikk som lar deg hente data på kanten, redusere serverbelastningen og forbedre nettapplikasjonsytelsen.

Du kan på samme måte redusere etterspørselens lediggang og gi kundene raskere og mer responsive sider ved å få informasjon fra et programmeringsgrensesnitt utenfra på kanten.

3. Brukes i autentisering

Ved å implementere tilgangskontrollregler på kanten, kan du forbedre nettappens sikkerhet og redusere risikoen for uautorisert tilgang til sensitive data.

Som et eksempel kan du vurdere en funksjon som sjekker en klients autentiseringstilstand og ekko den tilbake i svaret. Her er en oversikt over verifisering som involverer Edge-funksjoner i Next.js:

// pages/api/auth.js
eksportmisligholde (req, res) => {
konst { isAuthenticated } = req.cookies;
hvis (er autentisert) {
 res.status(200).json({ beskjed: "Du er autentisert" });
 } ellers {
 res.status(401).json({ beskjed: "Du er ikke autentisert" });
 }
}

I denne illustrasjonen undersøker Edge-funksjonen informasjonskapselen for et autentiseringstoken, og hvis den blir funnet, genererer den et JSON-svar med brukerens informasjon.

4. A/B-testen

En annen måte du kan bruke Next.js's Edge-funksjoner på er å optimalisere ytelsen til en nettapplikasjon ved å bruke A/B-testing. Du kan sammenligne ulike versjoner av et nettsted eller en applikasjon ved å bruke A/B-testing for å finne ut hvilken som gir best resultater.

En illustrasjon av hvordan Next.js's Edge-funksjoner kan brukes til å utføre A/B-testing er som følger:

// pages/api/abtest.js
konst varianter = ['variantA', 'variantB'];
eksportmisligholdefunksjonhandler(krav, res) {
konst { userId } = req.query;
// Generer en tilfeldig variant for brukeren
konst variantIndex = Matte.gulv(Matte.random() * variants.length);
konst variant = varianter[variantIndex];
// Lagre varianten i en informasjonskapsel
 res.setHeader('Set-Cookie', `variant=${variant}; Maks-alder=604800;`);
// Gjengi den tilsvarende varianten
hvis (variant 'variantA') {
 res.status(200).sende('Velkommen til variant A!');
 } ellers {
 res.status(200).sende('Velkommen til variant B!');
 }
}

Denne koden demonstrerer et API-grensesnittendepunkt som kjører en A/B-test for to unike varianter av en nettstedside. Den bruker Math.random() metode for å lage en tilfeldig variant for brukeren og lagre den i en informasjonskapsel med res.setHeader metode. Dette lar koden sikre at klienten ser den samme variasjonen ved fremtidige besøk.

Koden bruker deretter variant informasjonskapselens verdi for å gjengi den aktuelle varianten. Den viser en melding som indikerer hvilken variant den valgte.

Ved å bruke Edge-funksjoner kan utviklere bruke et kraftig verktøy kalt A/B-testing for å sammenligne forskjellige versjoner av en applikasjon eller nettside for å se hvilken som gir best ytelse. Du kan samle inn data om brukeratferd og forbedre nettapplikasjonens ytelse og brukeropplevelse ved å tilfeldig tildele brukere til ulike varianter.

5. Bufret svar

Reaksjonslagring er en annen måte du kan bruke Edge-funksjoner i Next.js for å strømlinjeforme nettkjøring. Det tillater oss å beholde reaksjoner i et bestemt tidsrom for å redusere antall forespørsler til serveren og arbeide med hastigheten til nettapplikasjonen.

Her er en illustrasjon av hvordan du kan utføre reaksjonslagring med Edge Capabilities i Next.js:

// pages/api/data.js
konst data = { Navn: 'John Doe', alder: 30 };
eksportmisligholdefunksjonhandler(krav, res) {
// Angi svarhoder for å aktivere hurtigbufring
 res.setHeader('Cache-kontroll', 's-maxage=10, stale-while-revalidate');
// Returner data
 res.status(200).json (data);
}

Dette eksemplet definerer et API-endepunkt som returnerer et JSON-svar med noen data.

Vi setter reaksjonshodene ved å bruke res.setHeader teknikk for å muliggjøre reservasjon i 10 sekunder ved å bruke s-maks-alder grense. Dette indikerer at CDN kan bufre svaret i opptil ti sekunder før det kreves en oppdatering.

Vi bruker også foreldet-mens-revalidere parameter for å la CDN vise et bufret svar som har utløpt mens et nytt svar lages i bakgrunnen. Selv om det hurtigbufrede svaret er utløpt, vil CDN generere et nytt og vil alltid sende et svar.

Kantfunksjoner svarbufring er en utmerket måte å øke hastigheten på nettapplikasjonen og redusere antall forespørsler til serveren. Du kan garantere brukere raskere og mer responsive nettsteder ved å bufre svar for en forhåndsbestemt tid.

Edge-funksjoner er en utrolig kraftig funksjon i Next.js

Next.js sin støtte for Edge-funksjoner er en overbevisende funksjon som lar deg kjøre tilpassede, serverløse funksjoner nærmere sluttbrukeren på edge-nettverket.

Det er flere måter du kan bruke Edge-funksjoner for å forbedre nettapplikasjoner: A/B-testing, responsbufring, dynamisk ruting, datahenting, autentisering.

Bruk av Edge-funksjoner i arkitekturen din kan forbedre kundenes opplevelse og resultere i raskere, mer responsive nettapplikasjoner.