Wat zijn randfuncties in Next.js? 5 manieren waarop u ze kunt gebruiken

Next.js is een populair, open-source framework voor het ontwikkelen van server-side gerenderde React-applicaties. Dankzij het gebruiksgemak en de aanpasbaarheid kun je er complexe webapplicaties mee maken.

Edge-functies zijn een van de meest opwindende functies van Next.js. Lees meer over Edge-functies en vijf manieren om ze te gebruiken in Next.js.

Wat zijn randfuncties?

Met de krachtige functie Edge-functies van Next.js kunt u aangepaste serverloze functies dichter bij de eindgebruiker op het edge-netwerk uitvoeren. Dit houdt in dat de code draait op servers die zich geografisch dichter bij de klant bevinden, waardoor webapplicaties sneller en beter presteren.

Edge-functies kunnen het verzoek of antwoord wijzigen, gegevens ophalen, authenticeren en meer.

Edge-functies werken direct. Omdat ze de tijd verkorten die nodig is om gegevens te laden en pagina's weer te geven, kunt u Edge-functies gebruiken om de webprestaties en gebruikerservaring te verbeteren.

Moderne en volgende generatie gadgets nodig hebben edge-computing omdat het betrouwbaarder en veiliger is dan cloud computing en maakt gebruik van Edge-functies. Bovendien is het capabeler en flexibeler dan alleen computeren op het apparaat.

Hier zijn enkele manieren waarop u Edge-functies kunt gebruiken in Next.js.

1. Dynamische routering

Een manier waarop u Edge-functies in Next.js kunt gebruiken, is via dynamische routering. U kunt aangepaste routes definiëren en beheren op basis van dynamische gegevens, zoals queryparameters of aanvraagheaders.

Dit is waardevol voor het maken van meer aanpasbare en dynamische webapplicaties die verschillende verzoeken afhandelen.

U kunt de Edge-functies van Next.js gebruiken om dynamische routering op de volgende manier te implementeren:

// pagina's/api/[slug].js
exporterenstandaardfunctiebehandelaar(req, res) {
const { slug } = verzoek.query;
als (naaktslak 'over') {
 res.status(200).versturen('Dit is de pagina over!');
 } andersals (naaktslak 'contact') {
 res.status(200).versturen('Dit is de contactpagina!');
 } anders {
 res.status(404).versturen('Pagina niet gevonden.');
 }
}

Dit voorbeeld toont de inhoud van een bestand met de naam [slug.js] in de pagina's/api directory om een ​​aangepaste route met dynamische gegevens te definiëren. De slug-grens wordt vervolgens verwijderd uit de aanvraagquery met behulp van aanvraag, waarmee u kunt omgaan met eisen die krachtig zijn gebaseerd op de waarde van de naaktslak.

Als een gebruiker bijvoorbeeld naar http://example.com/api/about, de slug-parameter wordt ingesteld op over. De behandelaar functie zal het juiste codeblok uitvoeren en het bericht weergeven "Dit is de pagina over!"

Als de klant langskomt http://example.com/api/contact, behandelaar retourneert het bericht "Dit is de contactpagina!"

Door Edge-functies voor dynamische routering te gebruiken, kunnen ontwikkelaars meer aanpasbare en dynamische webapplicaties maken die verschillende verzoeken kunnen verwerken op basis van veranderende gegevens.

2. Gegevens ophalen

In Next.js is het ophalen van gegevens een veelgebruikte use-case voor Edge-functies. U kunt de belasting van de server verminderen en de prestaties van de webtoepassing verbeteren door gegevens naar de edge te brengen.

De Edge-functies van Next.js kunnen gegevens ophalen, zoals in dit voorbeeld wordt getoond:

// pagina's/api/users/[id].js
exporterenstandaardasynchroonfunctiebehandelaar(req, res) {
const { id } = verzoek.query;
// Haal gebruikersgegevens op van een externe API
const reactie = wachten ophalen(` https://api.example.com/users/${id}`);
const gebruiker = wachten reactie.json();
// Geef de gebruikersgegevens terug
 res.status(200.json (gebruiker);
}

In dit voorbeeld wordt een API-eindpunt gedefinieerd dat gebruikmaakt van de ID kaart queryparameter om gebruikersgegevens op te halen uit een API van derden. De... gebruiken ophalen methode kunt u een verzoek naar de API sturen en vervolgens wachten op een antwoord met het sleutelwoord wait.

De code extraheert vervolgens de JSON-informatie door aan te roepen reactie.json() en slaat het op in een variabele. Tot slot gebruikt het de json methode van het antwoord om de antwoordgegevens op te maken als JSON.

Het ophalen van gegevens met de edge-functie is een krachtige techniek waarmee u gegevens aan de rand kunt ophalen, waardoor de serverbelasting wordt verminderd en de prestaties van webtoepassingen worden verbeterd.

U kunt ook de leegloop van de vraag verminderen en klanten snellere, meer responsieve pagina's bieden door informatie te krijgen van een externe programmeerinterface aan de edge.

3. Gebruikt bij authenticatie

Door toegangscontroleregels aan de rand te implementeren, kunt u de beveiliging van uw webapp verbeteren en het risico van ongeautoriseerde toegang tot gevoelige gegevens verkleinen.

Neem als voorbeeld een functie die de authenticatiestatus van een client controleert en deze weergeeft in het antwoord. Hier is een overzicht van verificatie met betrekking tot Edge-mogelijkheden in Next.js:

// pagina's/api/auth.js
exporterenstandaard (req, res) => {
const { isAuthenticated } = vereiste cookies;
als (is geverifieerd) {
 res.status(200.json({ bericht: 'Je bent geauthenticeerd' });
 } anders {
 res.status(401.json({ bericht: 'Je bent niet geauthenticeerd' });
 }
}

In deze illustratie onderzoekt de Edge-functie de cookie op een authenticatietoken en genereert, indien gevonden, een JSON-antwoord met de informatie van de gebruiker.

4. De A/B-test

Een andere manier waarop u de Edge-functies van Next.js kunt gebruiken, is door de prestaties van een webtoepassing te optimaliseren met behulp van A/B-testen. U kunt verschillende versies van een website of applicatie vergelijken met behulp van A/B-testen om te bepalen welke beter presteert.

Een voorbeeld van hoe de Edge-functies van Next.js kunnen worden gebruikt om A/B-testen uit te voeren, is als volgt:

// pagina's/api/abtest.js
const varianten = ['variantA', 'variantB'];
exporterenstandaardfunctiebehandelaar(req, res) {
const { userId } = verzoek.query;
// Genereer een willekeurige variant voor de gebruiker
const variantIndex = Wiskunde.vloer(Wiskunde.random() * varianten.lengte);
const variant = varianten[variantIndex];
// Bewaar de variant in een cookie
 reset.setHeader('Set-Cookie', `variant=${variant}; Max-Leeftijd=604800;`);
// Geef de overeenkomstige variant weer
als (variant 'variantA') {
 res.status(200).versturen('Welkom bij variant A!');
 } anders {
 res.status(200).versturen('Welkom bij variant B!');
 }
}

Deze code demonstreert een API-interface-eindpunt dat een A/B-test uitvoert voor twee unieke varianten van een sitepagina. Het gebruikt de Wiskunde.willekeurig() methode om een ​​willekeurige variant voor de gebruiker te maken en deze op te slaan in een cookie met de reset.setHeader methode. Hierdoor kan de code ervoor zorgen dat de klant bij toekomstige bezoeken dezelfde variatie ziet.

De code gebruikt dan de variant cookiewaarde om de juiste variant weer te geven. Het geeft een bericht weer dat aangeeft welke variant het heeft geselecteerd.

Met behulp van Edge-functies kunnen ontwikkelaars een krachtige tool genaamd A/B-testen gebruiken om verschillende versies van een applicatie of webpagina te vergelijken om te zien welke beter presteert. U kunt gegevens over gebruikersgedrag verzamelen en de prestaties en gebruikerservaring van de webapplicatie verbeteren door gebruikers willekeurig toe te wijzen aan verschillende varianten.

5. Reacties cachen

Reactieopslag is een andere manier waarop u Edge-mogelijkheden in Next.js kunt gebruiken om webuitvoering te stroomlijnen. Hiermee kunnen we reacties gedurende een bepaalde tijd bewaren om het aantal verzoeken aan de server te verminderen en aan de snelheid van de webapplicatie te werken.

Hier is een illustratie van hoe u reacties kunt opslaan met Edge-mogelijkheden in Next.js:

// pagina's/api/data.js
const gegevens = { naam: 'John Doe', leeftijd: 30 };
exporterenstandaardfunctiebehandelaar(req, res) {
// Stel reactieheaders in om caching in te schakelen
 reset.setHeader('Cache-controle', 's-maxage=10, verlopen-tijdens-revalideren');
// Geef gegevens terug
 res.status(200.json (gegevens);
}

In dit voorbeeld wordt een API-eindpunt gedefinieerd dat een JSON-antwoord met enkele gegevens retourneert.

We stellen de reactiekoppen in met behulp van de reset.setHeader techniek om 10 seconden te kunnen reserveren met behulp van de s-max-leeftijd grens. Dit geeft aan dat het CDN het antwoord maximaal tien seconden in de cache kan opslaan voordat het moet worden vernieuwd.

Wij gebruiken ook de muf-terwijl-revalideren parameter om het CDN een antwoord in de cache te laten leveren dat is verlopen terwijl er op de achtergrond een nieuw antwoord wordt gemaakt. Zelfs als het in de cache opgeslagen antwoord is verlopen, genereert het CDN een nieuw antwoord en stuurt het altijd een antwoord.

Edge Functions Response Caching is een uitstekende manier om de webapplicatie te versnellen en het aantal verzoeken aan de server te verminderen. U kunt gebruikers snellere en responsievere websites garanderen door reacties gedurende een vooraf bepaalde tijd in het cachegeheugen op te slaan.

Edge-functies zijn een ongelooflijk krachtige functie van Next.js

De ondersteuning van Next.js voor Edge-functies is een aantrekkelijke functie waarmee u aangepaste, serverloze functies dichter bij de eindgebruiker op het edge-netwerk kunt uitvoeren.

Er zijn verschillende manieren waarop u Edge-functies kunt gebruiken om webapplicaties te verbeteren: A/B-testen, responscaching, dynamische routering, gegevens ophalen, authenticatie.

Het gebruik van Edge-mogelijkheden in uw architectuur kan de ervaring van uw klanten verbeteren en resulteren in snellere, responsievere webapplicaties.