Kaj so robne funkcije v Next.js? 5 načinov, kako jih lahko uporabite

Next.js je priljubljeno odprtokodno ogrodje za razvoj aplikacij React, upodobljenih na strani strežnika. Zahvaljujoč enostavni uporabi in prilagodljivosti ga lahko uporabite za ustvarjanje kompleksnih spletnih aplikacij.

Funkcije Edge so ena najbolj razburljivih funkcij Next.js. Spoznajte funkcije Edge in pet načinov njihove uporabe v Next.js.

Kaj so robne funkcije?

Zmogljiva funkcija robnih funkcij Next.js vam omogoča izvajanje funkcij brez strežnika po meri bližje končnemu uporabniku v robnem omrežju. To pomeni, da se koda izvaja na strežnikih, ki so geografsko bližje odjemalcu, kar prinaša hitrejšo in večjo zmogljivost spletnih aplikacij.

Funkcije Edge lahko spremenijo zahtevo ali odgovor, pridobijo podatke, preverijo pristnost in drugo.

Funkcije Edge delujejo takoj. Ker skrajšajo čas, potreben za nalaganje podatkov in upodabljanje strani, lahko uporabite funkcije Edge za izboljšanje spletne zmogljivosti in uporabniške izkušnje.

Potrebujejo sodobne pripomočke in pripomočke naslednje generacije robno računalništvo ker je bolj zanesljiv in varen kot računalništvo v oblaku in izkorišča funkcije Edge. Poleg tega je bolj zmogljiv in prilagodljiv kot samo računanje na napravi.

Tukaj je nekaj načinov, kako lahko uporabite funkcije Edge v Next.js.

1. Dinamično usmerjanje

Eden od načinov, kako lahko uporabite funkcije Edge v Next.js, je dinamično usmerjanje. Določite in upravljate lahko poti po meri na podlagi dinamičnih podatkov, kot so parametri poizvedbe ali glave zahtev.

To je dragoceno za izdelavo bolj prilagodljivih in dinamičnih spletnih aplikacij, ki obravnavajo različne zahteve.

Funkcije Edge Next.js lahko uporabite za implementacijo dinamičnega usmerjanja na naslednji način:

// pages/api/[slug].js
izvozprivzetofunkcijovodja(zahteva, res) {
konst { polž } = req.query;
če (polž 'približno') {
 res.status(200).pošlji('To je stran o tem!');
 } drugačeče (polž 'stik') {
 res.status(200).pošlji('To je kontaktna stran!');
 } drugače {
 res.status(404).pošlji('Stran ni najdena.');
 }
}

Ta primer prikazuje vsebino datoteke z imenom [slug.js] v strani/api imenik za določitev poti po meri z dinamičnimi podatki. Meja polža se nato odstrani iz poizvedbe z uporabo req.query, ki vam omogoča, da se spopadete z zahtevami, ki močno temeljijo na vrednosti polž.

Na primer, če gre uporabnik na http://example.com/api/about, parameter polža bo nastavljen na približno. The vodja bo zagnala ustrezen blok kode in prikazala sporočilo "To je stran o tem!"

Če stranka obišče http://example.com/api/contact, vodja bo vrnil sporočilo "To je kontaktna stran!"

Z uporabo funkcij Edge za dinamično usmerjanje lahko razvijalci ustvarijo bolj prilagodljive in dinamične spletne aplikacije, ki lahko obravnavajo različne zahteve na podlagi spreminjajočih se podatkov.

2. Pridobivanje podatkov

V Next.js je en pogost primer uporabe funkcij Edge pridobivanje podatkov. S prenosom podatkov na rob lahko zmanjšate obremenitev strežnika in povečate delovanje spletne aplikacije.

Funkcije Next.js Edge lahko izvajajo pridobivanje podatkov, kot je prikazano v tem primeru:

// pages/api/users/[id].js
izvozprivzetoasinhfunkcijovodja(zahteva, res) {
konst { id } = req.query;
// Pridobi uporabniške podatke iz API-ja tretje osebe
konst odgovor = čakati prinesi (` https://api.example.com/users/${id}`);
konst uporabnik = čakati odziv.json();
// Vrni uporabniške podatke
 res.status(200).json (uporabnik);
}

Ta primer definira končno točko API-ja, ki uporablja id poizvedbeni parameter za pridobivanje uporabniških podatkov iz API-ja tretje osebe. Uporabljati prinašati lahko pošljete zahtevo API-ju in nato počakate na odgovor s ključno besedo await.

Koda nato s klicem izvleče informacije JSON response.json() in ga shrani v spremenljivko. Končno uporablja json način odgovora za oblikovanje podatkov odziva kot JSON.

Pridobivanje podatkov s funkcijo Edge je zmogljiva tehnika, ki vam omogoča pridobivanje podatkov na robu, kar zmanjša obremenitev strežnika in izboljša delovanje spletne aplikacije.

Prav tako lahko zmanjšate nedejavnost povpraševanja in strankam zagotovite hitrejše, bolj odzivne strani, tako da pridobite informacije iz zunanjega programskega vmesnika na robu.

3. Uporablja se pri preverjanju pristnosti

Z implementacijo pravil za nadzor dostopa na robu lahko izboljšate varnost vaše spletne aplikacije in zmanjšate tveganje nepooblaščenega dostopa do občutljivih podatkov.

Kot primer razmislite o funkciji, ki preveri odjemalčevo stanje avtentikacije in ga odmeva nazaj v odgovoru. Tukaj je oris preverjanja, ki vključuje zmogljivosti Edge v Next.js:

// pages/api/auth.js
izvozprivzeto (req, res) => {
konst { isAuthenticated } = zahtevani piškotki;
če (isAuthenticated) {
 res.status(200).json({ sporočilo: 'Preverjeni ste' });
 } drugače {
 res.status(401).json({ sporočilo: 'Niste preverjeni' });
 }
}

Na tej sliki funkcija Edge pregleda piškotek za žeton za preverjanje pristnosti in, če ga najde, ustvari odgovor JSON z informacijami uporabnika.

4. A/B test

Drug način, kako lahko uporabite funkcije Next.js's Edge, je optimizacija delovanja spletne aplikacije s testiranjem A/B. Z A/B testiranjem lahko primerjate različne različice spletnega mesta ali aplikacije, da ugotovite, katera je boljša.

Ilustracija, kako se lahko funkcije Next.js's Edge uporabljajo za izvajanje testiranja A/B, je naslednja:

// pages/api/abtest.js
konst različice = ['variantA', 'variantB'];
izvozprivzetofunkcijovodja(zahteva, res) {
konst { userId } = req.query;
// Ustvari naključno različico za uporabnika
konst variantIndex = matematika.nadstropje(matematika.random() * variants.length);
konst različica = različice[variantIndex];
// Varianto shrani v piškotek
 res.setHeader('Set-Cookie', `različica=${variant}; Največja starost=604800;`);
// Upodobi ustrezno različico
če (varianta 'variantA') {
 res.status(200).pošlji('Dobrodošli v različici A!');
 } drugače {
 res.status(200).pošlji('Dobrodošli pri varianti B!');
 }
}

Ta koda prikazuje končno točko vmesnika API, ki izvaja test A/B za dve edinstveni različici strani spletnega mesta. Uporablja Math.random() način za ustvarjanje naključne različice za uporabnika in jo shrani v piškotek z res.setHeader metoda. To kodi omogoča, da zagotovi, da stranka ob prihodnjih obiskih vidi isto različico.

Koda nato uporabi varianta vrednost piškotka za upodobitev ustrezne različice. Prikaže sporočilo, ki označuje, katero različico je izbral.

Z uporabo funkcij Edge lahko razvijalci uporabijo zmogljivo orodje, imenovano A/B testiranje, da primerjajo različne različice aplikacije ali spletne strani in ugotovijo, katera deluje bolje. Z naključnim dodeljevanjem uporabnikov različnim različicam lahko zbirate podatke o vedenju uporabnikov in izboljšate delovanje spletne aplikacije ter uporabniško izkušnjo.

5. Predpomnjenje odgovorov

Shranjevanje odziva je še en način, kako lahko uporabite zmogljivosti Edge v Next.js za poenostavitev spletnega izvajanja. Omogoča nam, da zadržimo odzive za določen čas, da zmanjšamo število zahtev, poslanih strežniku, in delamo na hitrosti spletne aplikacije.

Tukaj je ilustracija, kako lahko izvedete shranjevanje reakcij z Edge Capabilities v Next.js:

// pages/api/data.js
konst podatki = { ime: 'John Doe', starost: 30 };
izvozprivzetofunkcijovodja(zahteva, res) {
// Nastavite glave odgovorov, da omogočite predpomnjenje
 res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate');
// Vrni podatke
 res.status(200).json (podatki);
}

Ta primer definira končno točko API-ja, ki vrne odgovor JSON z nekaterimi podatki.

Reakcijske glave nastavimo z uporabo res.setHeader tehniko, ki omogoča rezervacijo za 10 sekund z uporabo s-max-starost meja. To pomeni, da lahko CDN predpomni odgovor do deset sekund, preden zahteva osvežitev.

Uporabljamo tudi stale-while-revalidate parameter, ki omogoča, da CDN streže predpomnjeni odgovor, ki je potekel, medtem ko se v ozadju pripravlja nov odgovor. Tudi če je predpomnjeni odgovor potekel, bo CDN ustvaril novega in vedno poslal odgovor.

Predpomnjenje odzivov funkcij Edge je odličen način za pospešitev spletne aplikacije in zmanjšanje števila zahtev do strežnika. Uporabnikom lahko zagotovite hitrejša in bolj odzivna spletna mesta s predpomnilnikom odgovorov za vnaprej določen čas.

Robne funkcije so neverjetno zmogljiva lastnost Next.js

Podpora Next.js za funkcije Edge je prepričljiva funkcija, ki vam omogoča izvajanje funkcij po meri brez strežnika bližje končnemu uporabniku v omrežju Edge.

Obstaja več načinov, kako lahko uporabite funkcije Edge za izboljšanje spletnih aplikacij: A/B testiranje, predpomnjenje odzivov, dinamično usmerjanje, pridobivanje podatkov, preverjanje pristnosti.

Uporaba zmogljivosti Edge v vaši arhitekturi lahko izboljša izkušnjo vaših strank in povzroči hitrejše in bolj odzivne spletne aplikacije.