Što su rubne funkcije u Next.js? 5 načina na koje ih možete koristiti

Next.js je popularan okvir otvorenog koda za razvoj React aplikacija prikazanih na strani poslužitelja. Zahvaljujući jednostavnosti korištenja i prilagodljivosti, možete ga koristiti za izradu složenih web aplikacija.

Edge funkcije jedna su od najuzbudljivijih značajki Next.js-a. Saznajte više o Edge funkcijama i pet načina za njihovu upotrebu u Next.js.

Što su rubne funkcije?

Snažna značajka rubnih funkcija Next.js-a omogućuje vam pokretanje prilagođenih funkcija bez poslužitelja bliže krajnjem korisniku na rubnoj mreži. To implicira da se kôd izvodi na poslužiteljima koji su geografski bliže klijentu, što omogućuje brže i bolje performanse u web aplikacijama.

Edge funkcije mogu promijeniti zahtjev ili odgovor, dohvatiti podatke, provjeriti autentičnost i još mnogo toga.

Rubne funkcije pokreću se trenutno. Budući da smanjuju vrijeme potrebno za učitavanje podataka i renderiranje stranica, možete koristiti Edge funkcije za poboljšanje web performansi i korisničkog iskustva.

Potrebni su moderni uređaji nove generacije rubno računalstvo jer je pouzdaniji i sigurniji od računalni oblak i koristi Edge funkcije. Osim toga, sposobniji je i fleksibilniji od samog računala na uređaju.

Evo nekoliko načina na koje možete koristiti Edge funkcije u Next.js.

1. Dinamičko usmjeravanje

Jedan od načina na koji možete koristiti Edge funkcije u Next.js je putem dinamičkog usmjeravanja. Možete definirati prilagođene rute i upravljati njima na temelju dinamičkih podataka, kao što su parametri upita ili zaglavlja zahtjeva.

Ovo je vrijedno za izradu prilagodljivijih i dinamičnijih web aplikacija koje se bave različitim zahtjevima.

Možete koristiti Edge funkcije Next.js za implementaciju dinamičkog usmjeravanja na sljedeći način:

// stranice/api/[slug].js
izvozzadanofunkcijarukovatelj(zahtjev, res) {
konst { slug } = req.query;
ako (puž 'oko') {
 res.status(200).poslati('Ovo je stranica s informacijama!');
 } drugoako (puž 'kontakt') {
 res.status(200).poslati('Ovo je stranica za kontakt!');
 } drugo {
 res.status(404).poslati('Stranica nije pronađena.');
 }
}

Ovaj primjer prikazuje sadržaj datoteke pod nazivom [slug.js] u stranice/api imenik za definiranje prilagođene rute s dinamičkim podacima. Granica sluga se zatim uklanja iz upita zahtjeva pomoću req.upit, koji vam omogućuje da se nosite sa zahtjevima snažno utemeljenim na vrijednosti puž.

Na primjer, ako korisnik ode na http://example.com/api/about, parametar slug bit će postavljen na oko. The rukovatelj funkcija će pokrenuti odgovarajući blok koda i prikazati poruku "Ovo je stranica o!"

Ako klijent posjeti http://example.com/api/contact, rukovatelj vratit će poruku "Ovo je stranica za kontakt!"

Koristeći funkcije Edge za dinamičko usmjeravanje, programeri mogu stvoriti prilagodljivije i dinamičnije web aplikacije koje mogu obraditi različite zahtjeve na temelju promjenjivih podataka.

2. Dohvaćanje podataka

U Next.js, jedan uobičajeni slučaj upotrebe Edge funkcija je dohvaćanje podataka. Možete smanjiti opterećenje poslužitelja i poboljšati izvedbu web aplikacije dovođenjem podataka na rub.

Edge funkcije Next.js mogu izvoditi dohvaćanje podataka, kao što je prikazano u ovom primjeru:

// stranice/api/korisnici/[id].js
izvozzadanoasinkronifunkcijarukovatelj(zahtjev, res) {
konst { id } = req.query;
// Dohvaćanje korisničkih podataka iz API-ja treće strane
konst odgovor = čekati dohvati (` https://api.example.com/users/${id}`);
konst korisnik = čekati odgovor.json();
// Vrati korisničke podatke
 res.status(200).json (korisnik);
}

Ovaj primjer definira API krajnju točku koja koristi iskaznica parametar upita za dohvaćanje korisničkih podataka iz API-ja treće strane. Koristiti dohvatiti metodu, možete poslati zahtjev API-ju i zatim čekati odgovor s ključnom riječi await.

Kod zatim izvlači JSON informacije pozivom response.json() i sprema ga u varijablu. Konačno, koristi se json metoda odgovora za formatiranje podataka odgovora kao JSON.

Dohvaćanje podataka rubne funkcije moćna je tehnika koja vam omogućuje dohvaćanje podataka na rubu, smanjujući opterećenje poslužitelja i poboljšavajući izvedbu web aplikacije.

Isto tako možete smanjiti neaktivnost potražnje i klijentima dati brže stranice s boljim odzivom dobivanjem informacija s vanjskog programskog sučelja na rubu.

3. Koristi se u Autentifikaciji

Implementacijom pravila kontrole pristupa na rubu, možete poboljšati sigurnost svoje web aplikacije i smanjiti rizik od neovlaštenog pristupa osjetljivim podacima.

Kao primjer, razmotrite funkciju koja provjerava klijentovo stanje provjere autentičnosti i vraća ga u odgovoru. Evo pregleda verifikacije koja uključuje Edge mogućnosti u Next.js:

// stranice/api/auth.js
izvozzadano (req, res) => {
konst { isAuthenticated } = req.cookies;
ako (isAuthenticated) {
 res.status(200).json({ poruka: 'Provjereni ste' });
 } drugo {
 res.status(401).json({ poruka: 'Niste provjereni' });
 }
}

Na ovoj ilustraciji, funkcija Edge ispituje kolačić za token za provjeru autentičnosti i, ako se pronađe, generira JSON odgovor s informacijama o korisniku.

4. A/B test

Još jedan način na koji možete koristiti Edge funkcije Next.js je optimizirati performanse web aplikacije pomoću A/B testiranja. Možete usporediti različite verzije web-mjesta ili aplikacije pomoću A/B testiranja kako biste utvrdili koja ima bolju izvedbu.

Sljedeća je ilustracija kako se funkcije Next.js Edge mogu koristiti za provođenje A/B testiranja:

// stranice/api/abtest.js
konst varijante = ['varijantaA', 'varijantaB'];
izvozzadanofunkcijarukovatelj(zahtjev, res) {
konst { userId } = req.query;
// Generirajte slučajnu varijantu za korisnika
konst variantIndex = matematika.kat(matematika.random() * variants.length);
konst varijanta = varijante[variantIndex];
// Spremite varijantu u kolačić
 res.setHeader('Set-Cookie', `varijanta=${variant}; Maksimalna dob=604800;`);
// Prikaz odgovarajuće varijante
ako (varijanta 'varijantaA') {
 res.status(200).poslati('Dobrodošli u varijantu A!');
 } drugo {
 res.status(200).poslati('Dobrodošli u varijantu B!');
 }
}

Ovaj kôd demonstrira krajnju točku sučelja API-ja koja pokreće A/B test za dvije jedinstvene varijacije stranice web-mjesta. Koristi se Math.random() metoda za stvaranje slučajne varijante za korisnika i pohranjuje je u kolačić s res.setHeader metoda. To omogućuje kodu da osigura da klijent vidi istu varijaciju prilikom budućih posjeta.

Kod zatim koristi varijanta vrijednost kolačića za prikaz odgovarajuće varijante. Prikazuje poruku koja pokazuje koja je varijanta odabrana.

Koristeći Edge funkcije, programeri mogu koristiti moćan alat pod nazivom A/B testiranje za usporedbu različitih verzija aplikacije ili web stranice kako bi vidjeli koja ima bolju izvedbu. Možete prikupljati podatke o ponašanju korisnika i poboljšati izvedbu web aplikacije i korisničko iskustvo nasumičnim dodjeljivanjem korisnika različitim varijantama.

5. Spremanje odgovora u predmemoriju

Pohranjivanje reakcija još je jedan način na koji možete koristiti Edge mogućnosti u Next.js za pojednostavljenje web-izvršenja. Omogućuje nam da zadržimo reakcije određeno vrijeme kako bismo smanjili broj zahtjeva upućenih poslužitelju i radili na brzini web aplikacije.

Ovdje je ilustracija kako možete izvršiti pohranjivanje reakcija s Edge Capabilities u Next.js:

// stranice/api/data.js
konst podaci = { Ime: 'John Doe', dob: 30 };
izvozzadanofunkcijarukovatelj(zahtjev, res) {
// Postavite zaglavlja odgovora da omogućite predmemoriju
 res.setHeader('Kontrola predmemorije', 's-maxage=10, stale-while-revalidate');
// Vrati podatke
 res.status(200).json (podaci);
}

Ovaj primjer definira API krajnju točku koja vraća JSON odgovor s nekim podacima.

Postavljamo zaglavlja reakcija pomoću res.setHeader tehnika za omogućavanje rezerviranja na 10 sekundi pomoću s-max-starost granica. To znači da CDN može predmemorirati odgovor do deset sekundi prije nego što zahtijeva osvježavanje.

Također koristimo stale-while-revalidate parametar koji omogućuje CDN-u da posluži predmemorirani odgovor koji je istekao dok se u pozadini šalje novi odgovor. Čak i ako je predmemorirani odgovor istekao, CDN će generirati novi i uvijek će poslati odgovor.

Predmemoriranje odgovora rubnih funkcija izvrstan je način za ubrzavanje web aplikacije i smanjenje broja zahtjeva prema poslužitelju. Korisnicima možete jamčiti brže web stranice koje bolje reagiraju pohranjivanjem odgovora u predmemoriju na unaprijed određeno vrijeme.

Rubne funkcije su nevjerojatno moćna značajka Next.js

Podrška Next.js za Edge funkcije je uvjerljiva značajka koja vam omogućuje pokretanje prilagođenih funkcija bez poslužitelja bliže krajnjem korisniku na rubnoj mreži.

Postoji nekoliko načina na koje možete koristiti Edge funkcije za poboljšanje web aplikacija: A/B testiranje, predmemorija odgovora, dinamičko usmjeravanje, dohvaćanje podataka, autentifikacija.

Korištenje Edge mogućnosti u vašoj arhitekturi može poboljšati iskustvo vaših klijenata i rezultirati bržim web aplikacijama s boljim odzivom.