Mitä ovat Next.js: n reunafunktiot? 5 tapaa käyttää niitä

Next.js on suosittu avoimen lähdekoodin kehys palvelinpuolen renderöityjen React-sovellusten kehittämiseen. Helppokäyttöisyytensä ja mukautumiskykynsä ansiosta voit luoda sen avulla monimutkaisia ​​verkkosovelluksia.

Edge-toiminnot ovat yksi Next.js: n jännittävimmistä ominaisuuksista. Opi Edge-funktioista ja viidestä tavasta käyttää niitä Next.js: ssä.

Mitä ovat reunafunktiot?

Next.js: n tehokkaan Edge Functions -ominaisuuden avulla voit suorittaa mukautettuja palvelimettomia toimintoja lähempänä loppukäyttäjää reunaverkossa. Tämä tarkoittaa, että koodi toimii palvelimilla, jotka sijaitsevat maantieteellisesti lähempänä asiakasta, mikä mahdollistaa nopeamman ja paremman suorituskyvyn verkkosovelluksissa.

Edge-toiminnot voivat muuttaa pyyntöä tai vastausta, hakea tietoja, todentaa ja paljon muuta.

Edge-toiminnot toimivat välittömästi. Koska ne vähentävät tietojen lataamiseen ja sivujen hahmontamiseen kuluvaa aikaa, voit käyttää Edge-toimintoja parantaaksesi verkon suorituskykyä ja käyttökokemusta.

Tarvitaan nykyaikaisia ​​ja uuden sukupolven laitteita reunalaskenta koska se on luotettavampi ja turvallisempi kuin pilvilaskenta ja hyödyntää Edge-toimintoja. Lisäksi se on tehokkaampi ja joustavampi kuin pelkkä laskenta laitteessa.

Seuraavassa on joitain tapoja käyttää Edge-toimintoja Next.js: ssä.

1. Dynaaminen reititys

Yksi tapa käyttää Edge-toimintoja Next.js: ssä on dynaaminen reititys. Voit määrittää ja hallita mukautettuja reittejä dynaamisten tietojen, kuten kyselyparametrien tai pyyntöotsikoiden, perusteella.

Tämä on arvokasta, jotta voidaan tehdä joustavampia ja dynaamisempia verkkosovelluksia, jotka käsittelevät erilaisia ​​pyyntöjä.

Voit käyttää Next.js: n Edge-funktioita dynaamisen reitityksen toteuttamiseen seuraavalla tavalla:

// pages/api/[slug].js
viedäoletuksenatoimintokäsittelijä(req, res) {
konst { slug } = req.query;
jos (etana 'noin') {
 res.status(200).lähettää('Tämä on noin sivu!');
 } muujos (etana 'ottaa yhteyttä') {
 res.status(200).lähettää('Tämä on yhteydenottosivu!');
 } muu {
 res.status(404).lähettää('Sivua ei löydetty.');
 }
}

Tässä esimerkissä näkyy tiedoston sisältö [slug.js] in sivut/api hakemistossa voit määrittää mukautetun reitin dynaamisilla tiedoilla. Slug-raja poistetaan sitten pyyntökyselystä käyttämällä req.query, jonka avulla voit käsitellä vaatimuksia, jotka perustuvat voimakkaasti arvoon etana.

Esimerkiksi jos käyttäjä menee osoitteeseen http://example.com/api/about, slug-parametriksi asetetaan noin. The käsittelijä -toiminto suorittaa asianmukaisen koodilohkon ja näyttää viestin "Tämä on tietosivu!"

Jos asiakas käy http://example.com/api/contact, käsittelijä palauttaa viestin "Tämä on yhteystietosivu!"

Käyttämällä Edge-toimintoja dynaamiseen reitittämiseen kehittäjät voivat luoda entistä mukautuvampia ja dynaamisempia verkkosovelluksia, jotka voivat käsitellä erilaisia ​​muuttuviin tietoihin perustuvia pyyntöjä.

2. Tietojen hakeminen

Next.js: ssä yksi yleinen Edge-funktioiden käyttötapa on tietojen hakeminen. Voit vähentää palvelimen kuormitusta ja parantaa verkkosovelluksen suorituskykyä tuomalla tiedot reunalle.

Next.js: n Edge-funktiot voivat suorittaa tietojen hakemisen, kuten tässä esimerkissä näkyy:

// pages/api/users/[id].js
viedäoletuksenaasynktoimintokäsittelijä(req, res) {
konst { id } = req.query;
// Hae käyttäjätiedot kolmannen osapuolen API: sta
konst vastaus = odottaa hae(` https://api.example.com/users/${id}`);
konst käyttäjä = odottaa vastaus.json();
// Palauta käyttäjätiedot
 res.status(200.json (käyttäjä);
}

Tämä esimerkki määrittää API-päätepisteen, joka käyttää id kyselyparametri käyttäjän tietojen hakemiseksi kolmannen osapuolen API: sta. Käyttämällä hakea menetelmää, voit lähettää pyynnön API: lle ja odottaa vastausta await-avainsanalla.

Koodi poimii sitten JSON-tiedot soittamalla vastaus.json() ja tallentaa sen muuttujaan. Lopuksi se käyttää json vastauksen menetelmä muotoilla vastaustiedot JSON-muotoon.

Edge-funktion tietojen nouto on tehokas tekniikka, jonka avulla voit noutaa tietoja reunasta, mikä vähentää palvelimen kuormitusta ja parantaa verkkosovellusten suorituskykyä.

Voit myös vähentää kysynnän joutotilaa ja tarjota asiakkaille nopeampia ja reagoivampia sivuja hankkimalla tietoa ulkopuolisesta ohjelmointiliittymästä reunassa.

3. Käytetään todentamisessa

Ottamalla käyttöön kulunvalvontasäännöt reunassa voit parantaa verkkosovelluksesi turvallisuutta ja vähentää arkaluontoisten tietojen luvattoman käytön riskiä.

Esimerkkinä voidaan harkita toimintoa, joka tarkistaa asiakkaan todennustilan ja toistaa sen vastauksessa. Seuraavassa on katsaus Edge-ominaisuuksiin liittyvästä vahvistuksesta Next.js: ssä:

// pages/api/auth.js
viedäoletuksena (req, res) => {
konst { isAuthenticated } = vaaditaan evästeitä;
jos (on Authenticated) {
 res.status(200).json({ viesti: "Olet todennettu" });
 } muu {
 res.status(401).json({ viesti: "Et ole todennettu" });
 }
}

Tässä kuvassa Edge-toiminto tutkii evästeen todennustunnisteen varalta ja, jos se löytyy, luo JSON-vastauksen käyttäjän tiedoilla.

4. A/B testi

Toinen tapa käyttää Next.js: n Edge-toimintoja on optimoida verkkosovelluksen suorituskyky A/B-testauksella. Voit verrata verkkosivuston tai sovelluksen eri versioita A/B-testauksen avulla määrittääksesi, kumpi toimii paremmin.

Seuraava esimerkki siitä, kuinka Next.js: n Edge-toimintoja voidaan käyttää A/B-testaukseen:

// pages/api/abtest.js
konst variantit = ['variant A', 'varianttiB'];
viedäoletuksenatoimintokäsittelijä(req, res) {
konst { userId } = req.query;
// Luo käyttäjälle satunnainen muunnelma
konst variantIndex = Matematiikka.lattia(Matematiikka.random() * variantit.pituus);
konst variantti = variantit[variantinindeksi];
// Tallenna muunnelma evästeeseen
 res.setHeader("Set-Cookie", `variantti=${variant}; Suurin ikä = 604800;`);
// Renderöi vastaava muunnelma
jos (variantti 'variant A') {
 res.status(200).lähettää("Tervetuloa varianttiin A!");
 } muu {
 res.status(200).lähettää("Tervetuloa varianttiin B!");
 }
}

Tämä koodi esittelee API-liittymän päätepisteen, joka suorittaa A/B-testin sivuston sivun kahdelle ainutlaatuiselle muunnelmalle. Se käyttää Math.random() tapa luoda satunnainen muunnelma käyttäjälle ja tallentaa se evästeeseen res.setHeader menetelmä. Tämän avulla koodi varmistaa, että asiakas näkee saman muunnelman tulevilla käynneillä.

Koodi käyttää sitten variantti evästeen arvon oikean muunnelman näyttämiseksi. Se näyttää viestin, joka osoittaa, minkä muunnelman se valitsi.

Edge-toimintojen avulla kehittäjät voivat käyttää tehokasta A/B-testaustyökalua vertaillakseen sovelluksen tai verkkosivun eri versioita nähdäkseen, kumpi toimii paremmin. Voit kerätä tietoja käyttäjien käyttäytymisestä ja parantaa verkkosovelluksen suorituskykyä ja käyttökokemusta kohdistamalla käyttäjiä satunnaisesti eri muunnelmiin.

5. Välimuistissa olevat vastaukset

Reaktioiden tallennus on toinen tapa, jolla voit käyttää Next.js: n Edge-ominaisuuksia tehostaaksesi web-suoritusta. Sen avulla voimme säilyttää reaktioita tietyn ajan vähentääksemme palvelimelle tehtyjen pyyntöjen määrää ja parantaaksemme verkkosovelluksen nopeutta.

Tässä on esimerkki siitä, kuinka voit suorittaa reaktioiden tallentamisen Edge Capabilities -sovelluksella Next.js: ssä:

// pages/api/data.js
konst data = { nimi: "John Doe", ikä: 30 };
viedäoletuksenatoimintokäsittelijä(req, res) {
// Aseta vastausotsikot ottaaksesi välimuistin käyttöön
 res.setHeader("välimuistin hallinta", 's-maxage=10, vanhentunut-kun-validate');
// Palauta tiedot
 res.status(200.json (data);
}

Tässä esimerkissä määritellään API-päätepiste, joka palauttaa JSON-vastauksen joidenkin tietojen kanssa.

Asetamme reaktiootsikot käyttämällä res.setHeader tekniikkaa, jotta voit varata 10 sekuntia käyttämällä s-max-ikä rajaa. Tämä osoittaa, että CDN voi tallentaa vastauksen välimuistiin jopa kymmenen sekunnin ajan ennen kuin se vaatii päivityksen.

Käytämme myös vanhentunut, kun-validoida uudelleen parametri, jotta CDN palvelee välimuistissa olevaa vastausta, joka on vanhentunut, kun uutta vastausta tehdään taustalla. Vaikka välimuistissa oleva vastaus olisi vanhentunut, CDN luo uuden ja lähettää aina vastauksen.

Edge-toimintojen vastausvälimuisti on erinomainen tapa nopeuttaa verkkosovellusta ja vähentää pyyntöjen määrää palvelimelle. Voit taata käyttäjille nopeammat ja reagoivammat verkkosivustot tallentamalla vastaukset välimuistiin ennalta määrätyn ajan.

Edge-toiminnot ovat Next.js: n uskomattoman tehokas ominaisuus

Next.js: n Edge-toimintojen tuki on houkutteleva ominaisuus, jonka avulla voit suorittaa mukautettuja, palvelimettomia toimintoja lähempänä loppukäyttäjää reunaverkossa.

Edge-toimintojen avulla voit parantaa verkkosovelluksia useilla tavoilla: A/B-testaus, vastausten välimuisti, dynaaminen reititys, tietojen nouto, todennus.

Edge-ominaisuuksien käyttäminen arkkitehtuurissasi voi parantaa asiakkaidesi käyttökokemusta ja tuottaa nopeampia ja reagoivampia verkkosovelluksia.