Kas yra „Next.js“ krašto funkcijos? 5 būdai, kaip galite juos naudoti

Next.js yra populiari atvirojo kodo sistema, skirta serverio pusėje pateikiamoms React programoms kurti. Dėl paprasto naudojimo ir pritaikomumo galite jį naudoti kurdami sudėtingas žiniatinklio programas.

Edge funkcijos yra viena įdomiausių Next.js funkcijų. Sužinokite apie „Edge“ funkcijas ir penkis būdus, kaip jas naudoti „Next.js“.

Kas yra krašto funkcijos?

„Next.js“ galinga „Edge“ funkcijų funkcija leidžia paleisti pasirinktines be serverio funkcijas arčiau galutinio vartotojo krašto tinkle. Tai reiškia, kad kodas veikia serveriuose, esančiuose geografiškai arčiau kliento, todėl žiniatinklio programos veikia greičiau ir geriau.

Edge funkcijos gali pakeisti užklausą ar atsakymą, gauti duomenis, autentifikuoti ir kt.

Edge funkcijos veikia akimirksniu. Dėl jų sutrumpėja duomenų įkėlimo ir puslapių pateikimo laikas, todėl galite naudoti Edge funkcijas, kad pagerintumėte žiniatinklio našumą ir naudotojų patirtį.

Reikia modernių ir naujos kartos įtaisų krašto skaičiavimas nes jis yra patikimesnis ir saugesnis nei debesų kompiuterija ir išnaudoja Edge funkcijas. Be to, jis yra pajėgesnis ir lankstesnis nei vien kompiuteris įrenginyje.

Štai keletas būdų, kaip Next.js galite naudoti Edge funkcijas.

1. Dinaminis maršruto parinkimas

Vienas iš būdų, kaip Next.js galite naudoti Edge funkcijas, yra dinaminis maršruto parinkimas. Galite apibrėžti ir valdyti tinkintus maršrutus pagal dinaminius duomenis, pvz., užklausos parametrus arba užklausų antraštes.

Tai naudinga norint sukurti labiau pritaikomas ir dinamiškesnes žiniatinklio programas, kurios sprendžia įvairias užklausas.

Galite naudoti Next.js Edge funkcijas, kad įgyvendintumėte dinaminį maršrutą tokiu būdu:

// pages/api/[slug].js
eksportuotinumatytasfunkcijaprižiūrėtojas(req, res) {
konst { šliužas } = req.query;
jeigu (šliužas 'apie') {
 res.status(200).siųsti("Tai puslapis apie!");
 } Kitasjeigu (šliužas 'kontaktas') {
 res.status(200).siųsti('Tai yra kontaktų puslapis!');
 } Kitas {
 res.status(404).siųsti('Puslapis nerastas.');
 }
}

Šiame pavyzdyje parodytas failo pavadinimu turinys [slug.js] viduje puslapiai/api katalogą, kad apibrėžtumėte pasirinktinį maršrutą su dinaminiais duomenimis. Tada šliužo riba pašalinama iš užklausos naudojant req.query, kuri leidžia patenkinti poreikius, stipriai pagrįstus verte šliužas.

Pavyzdžiui, jei vartotojas eina į http://example.com/api/about, bus nustatytas šliužo parametras apie. The prižiūrėtojas funkcija paleis atitinkamą kodo bloką ir parodys pranešimą "Tai yra apie puslapį!"

Jei klientas apsilanko http://example.com/api/contact, prižiūrėtojas grąžins pranešimą "Tai yra kontaktų puslapis!"

Naudodami Edge funkcijas dinaminiam maršruto parinkimui, kūrėjai gali sukurti labiau pritaikomas ir dinamiškas žiniatinklio programas, kurios gali apdoroti įvairias užklausas pagal besikeičiančius duomenis.

2. Duomenų gavimas

„Next.js“ vienas įprastas „Edge“ funkcijų naudojimo atvejis yra duomenų gavimas. Galite sumažinti serverio apkrovą ir padidinti žiniatinklio programos našumą perkeldami duomenis į kraštus.

Next.js Edge funkcijos gali atlikti duomenų gavimą, kaip parodyta šiame pavyzdyje:

// pages/api/users/[id].js
eksportuotinumatytasasyncfunkcijaprižiūrėtojas(req, res) {
konst { id } = req.query;
// Gaukite vartotojo duomenis iš trečiosios šalies API
konst atsakymas = laukti atnešti (` https://api.example.com/users/${id}`);
konst vartotojas = laukti atsakymas.json();
// Grąžinti vartotojo duomenis
 res.status(200.json (vartotojas);
}

Šiame pavyzdyje apibrėžiamas API galutinis taškas, kuris naudoja id užklausos parametras, norint gauti vartotojo duomenis iš trečiosios šalies API. Naudojant atnešti metodą, galite nusiųsti užklausą API ir laukti atsakymo su laukimo raktiniu žodžiu.

Tada kodas ištraukia JSON informaciją skambindamas response.json() ir išsaugo jį kintamajame. Galiausiai jis naudoja json atsakymo būdas formatuoti atsakymo duomenis kaip JSON.

Krašto funkcijos duomenų gavimas yra galingas metodas, leidžiantis gauti duomenis iš krašto, sumažinant serverio apkrovą ir pagerinant žiniatinklio programų našumą.

Taip pat galite sumažinti paklausos neveiklumą ir suteikti klientams greitesnius, labiau reaguojančius puslapius, gaudami informaciją iš pašalinės programavimo sąsajos.

3. Naudojamas autentifikavimui

Įdiegę prieigos kontrolės taisykles galite pagerinti žiniatinklio programos saugumą ir sumažinti neteisėtos prieigos prie neskelbtinų duomenų riziką.

Kaip pavyzdį apsvarstykite funkciją, kuri tikrina kliento autentifikavimo būseną ir pakartoja ją atsakyme. Štai patvirtinimo, apimančio „Edge“ galimybes, esančią „Next.js“:

// pages/api/auth.js
eksportuotinumatytas (req, res) => {
konst { is Authenticated } = req.cookies;
jeigu (yra autentifikuota) {
 res.status(200.json({ žinutę: „Esate patvirtintas“ });
 } Kitas {
 res.status(401.json({ žinutę: „Jūs nesate patvirtintas“ });
 }
}

Šioje iliustracijoje „Edge“ funkcija tiria autentifikavimo prieigos rakto slapuką ir, jei randamas, sugeneruoja JSON atsakymą su vartotojo informacija.

4. A/B testas

Kitas būdas, kuriuo galite naudoti Next.js Edge funkcijas, yra optimizuoti žiniatinklio programos našumą naudojant A/B testavimą. Galite palyginti įvairias svetainės ar programos versijas naudodami A/B testavimą, kad nustatytumėte, kuri iš jų veikia geriau.

Toliau pateikiama iliustracija, kaip Next.js Edge funkcijos gali būti naudojamos atliekant A/B testavimą:

// pages/api/abtest.js
konst variantai = ['variantA', 'variantB'];
eksportuotinumatytasfunkcijaprižiūrėtojas(req, res) {
konst { userId } = req.query;
// Sugeneruokite atsitiktinį vartotojo variantą
konst variantasIndeksas = Matematika.floor(Matematika.random() * variantai.ilgis);
konst variantas = variantai[variantIndex];
// Išsaugokite variantą sausainyje
 res.setHeader(„Slapuko rinkinys“, `variantas =${variant}; Maksimalus amžius = 604800;`);
// Pateikite atitinkamą variantą
jeigu (variantas 'variantA') {
 res.status(200).siųsti(„Sveiki atvykę į A variantą!“);
 } Kitas {
 res.status(200).siųsti(„Sveiki atvykę į B variantą!“);
 }
}

Šis kodas demonstruoja API sąsajos galutinį tašką, kuris atlieka dviejų unikalių svetainės puslapio variantų A/B testą. Jis naudoja Math.random() būdas sukurti atsitiktinį variantą vartotojui ir išsaugoti jį slapuke su res.setHeader metodas. Tai leidžia kodui užtikrinti, kad klientas būsimų apsilankymų metu matytų tą patį variantą.

Tada kodas naudoja variantas slapuko vertę, kad būtų pateiktas tinkamas variantas. Rodomas pranešimas, nurodantis, kurį variantą pasirinko.

Naudodami Edge funkcijas, kūrėjai gali naudoti galingą įrankį, vadinamą A/B testavimu, kad palygintų skirtingas programos ar tinklalapio versijas ir sužinotų, kuri iš jų veikia geriau. Galite rinkti duomenis apie naudotojų elgesį ir pagerinti žiniatinklio programos našumą bei vartotojo patirtį atsitiktinai priskirdami vartotojus įvairiems variantams.

5. Atsakymų kaupimas talpykloje

Reakcijos saugojimas yra dar vienas būdas, kuriuo galite naudoti „Edge“ galimybes programoje Next.js, kad supaprastintumėte žiniatinklio vykdymą. Tai leidžia mums išlaikyti reakcijas tam tikrą laiką, kad sumažintume serveriui pateiktų užklausų skaičių ir padidintume žiniatinklio programos greitį.

Čia yra iliustracija, kaip galite saugoti reakciją naudodami „Edge Capabilities“ programoje Next.js:

// pages/api/data.js
konst duomenys = { vardas: "John Doe", amžiaus: 30 };
eksportuotinumatytasfunkcijaprižiūrėtojas(req, res) {
// Nustatykite atsakymo antraštes, kad įgalintumėte talpyklą
 res.setHeader(„Talpyklos valdymas“, 's-maxage=10, pasenęs, o pakartotinis patvirtinimas');
// Grąžinti duomenis
 res.status(200.json (duomenys);
}

Šiame pavyzdyje apibrėžiamas API galutinis taškas, kuris grąžina JSON atsakymą su kai kuriais duomenimis.

Reakcijų antraštes nustatome naudodami res.setHeader technika, leidžianti rezervuoti 10 sekundžių naudojant s-maksimalus amžius riba. Tai rodo, kad CDN atsakymą gali išsaugoti talpykloje iki dešimties sekundžių, kol reikės atnaujinti.

Mes taip pat naudojame pasenęs, o iš naujo patvirtinti parametras, leidžiantis CDN teikti talpykloje saugomą atsakymą, kurio galiojimo laikas pasibaigė, kol fone pateikiamas naujas atsakymas. Net jei talpykloje esančio atsakymo galiojimo laikas baigėsi, CDN sugeneruos naują ir visada išsiųs atsakymą.

Edge funkcijų atsakymų kaupimas talpykloje yra puikus būdas pagreitinti žiniatinklio programą ir sumažinti serveriui siunčiamų užklausų skaičių. Galite garantuoti vartotojams greitesnes ir labiau reaguojančias svetaines, iš anksto nustatytą laiką atsaugodami atsakymus talpykloje.

Edge funkcijos yra neįtikėtinai galinga Next.js funkcija

Next.js palaikymas Edge funkcijoms yra patraukli funkcija, leidžianti paleisti pasirinktines funkcijas be serverio arčiau galutinio vartotojo krašto tinkle.

Yra keletas būdų, kaip naudoti „Edge“ funkcijas, kad patobulintumėte žiniatinklio programas: A/B testavimas, atsakymų kaupimas talpykloje, dinaminis maršruto parinkimas, duomenų gavimas, autentifikavimas.

Naudodami Edge galimybes savo architektūroje galite pagerinti klientų patirtį ir sukurti greitesnes, labiau reaguojančias žiniatinklio programas.