Mis on Next.js'i servafunktsioonid? 5 võimalust, kuidas neid kasutada

Next.js on populaarne avatud lähtekoodiga raamistik serveripoolselt renderdatud Reacti rakenduste arendamiseks. Tänu kasutuslihtsusele ja kohandatavusele saate seda kasutada keerukate veebirakenduste loomiseks.

Edge-funktsioonid on Next.js-i üks põnevamaid funktsioone. Lisateave Edge'i funktsioonide ja viie viisi kohta nende kasutamiseks saidis Next.js.

Mis on servafunktsioonid?

Next.js'i võimas Edge'i funktsioonide funktsioon võimaldab teil käivitada kohandatud serverita funktsioone äärevõrgus lõppkasutajale lähemal. See tähendab, et kood töötab serverites, mis asuvad kliendile geograafiliselt lähemal, tagades veebirakenduste kiirema ja suurema jõudluse.

Edge'i funktsioonid võivad taotlust või vastust muuta, andmeid tuua, autentida ja palju muud.

Edge funktsioonid käivituvad koheselt. Kuna need vähendavad andmete laadimiseks ja lehtede renderdamiseks kuluvat aega, saate Edge'i funktsioone kasutada veebi jõudluse ja kasutuskogemuse parandamiseks.

Moodsad ja uue põlvkonna vidinad vajavad äärearvutus sest see on töökindlam ja turvalisem kui pilvandmetöötlus ja kasutab Edge funktsioone. Lisaks on see võimekam ja paindlikum kui üksi seadmes arvutis töötamine.

Siin on mõned viisid, kuidas saate rakenduses Next.js Edge'i funktsioone kasutada.

1. Dünaamiline marsruutimine

Üks võimalus Edge'i funktsioonide kasutamiseks rakenduses Next.js on dünaamiline marsruutimine. Saate määratleda ja hallata kohandatud marsruute, mis põhinevad dünaamilistel andmetel, nagu päringuparameetrid või päringu päised.

See on väärtuslik kohanemisvõimelisemate ja dünaamilisemate veebirakenduste loomiseks, mis tegelevad erinevate päringutega.

Saate kasutada Next.js'i Edge'i funktsioone, et rakendada dünaamilist marsruutimist järgmisel viisil.

// pages/api/[slug].js
eksportidavaikimisifunktsioonikäitleja(req, res) {
konst { nälkjas } = req.query;
kui (nälkjas 'umbes') {
 res.status(200).saada('See on teemaleht!');
 } muidukui (nälkjas 'kontakt') {
 res.status(200).saada('See on kontaktide leht!');
 } muidu {
 res.status(404).saada('Lehte ei leitud.');
 }
}

See näide näitab faili nimega sisu [slug.js] aastal lehed/api kataloog dünaamiliste andmetega kohandatud marsruudi määratlemiseks. Seejärel eemaldatakse nälkja piir päringust kasutades req.query, mis võimaldab teil toime tulla nõudmistega, mis põhinevad tugevalt väärtusel nälkjas.

Näiteks kui kasutaja läheb aadressile http://example.com/api/about, nälkja parameeter seatakse väärtusele umbes. The käitleja funktsioon käivitab vastava koodiploki ja kuvab teate "See on leht!"

Kui klient külastab http://example.com/api/contact, käitleja tagastab teate "See on kontakti leht!"

Kasutades dünaamilise marsruutimise jaoks Edge'i funktsioone, saavad arendajad luua kohandatavamaid ja dünaamilisemaid veebirakendusi, mis saavad hakkama erinevate taotlustega, mis põhinevad muutuvatel andmetel.

2. Andmete toomine

Rakenduses Next.js on Edge'i funktsioonide üks levinumaid kasutusjuhtumeid andmete toomine. Saate vähendada serveri koormust ja suurendada veebirakenduse jõudlust, tuues andmed servale.

Next.js'i Edge'i funktsioonid võivad andmeid tuua, nagu on näidatud selles näites:

// pages/api/users/[id].js
eksportidavaikimisiasünkrfunktsioonikäitleja(req, res) {
konst { id } = req.query;
// Kasutajaandmete toomine kolmanda osapoole API-st
konst vastus = ootama tõmba(` https://api.example.com/users/${id}`);
konst kasutaja = ootama vastus.json();
// Tagastab kasutaja andmed
 res.status(200.json (kasutaja);
}

See näide määratleb API lõpp-punkti, mis kasutab id päringu parameeter kasutajaandmete toomiseks kolmanda osapoole API-st. Kasutades tooma meetodit, saate saata API-le päringu ja seejärel oodata vastust märksõnaga await.

Seejärel eraldab kood helistades JSON-teabe response.json() ja salvestab selle muutujasse. Lõpuks kasutab see json vastuse meetod, et vormindada vastuse andmed JSON-vormingus.

Edge-funktsiooni andmete toomine on võimas tehnika, mis võimaldab hankida andmeid servast, vähendades serveri koormust ja parandades veebirakenduste jõudlust.

Samuti saate vähendada nõudluse jõudeolekut ja pakkuda klientidele kiiremaid ja tundlikumaid lehti, hankides teavet kõrval asuvalt programmeerimisliideselt.

3. Kasutatakse autentimisel

Juurdepääsukontrolli reeglite rakendamisega saate parandada oma veebirakenduse turvalisust ja vähendada volitamata juurdepääsu ohtu tundlikele andmetele.

Näiteks kaaluge funktsiooni, mis kontrollib kliendi autentimise olekut ja kordab seda vastuses. Siin on Edge'i võimalusi hõlmava kinnituse ülevaade rakenduses Next.js.

// pages/api/auth.js
eksportidavaikimisi (req, res) => {
konst { is Authenticated } = nõutavad küpsised;
kui (on Authenticated) {
 res.status(200).json({ sõnum: "Te olete autentitud" });
 } muidu {
 res.status(401).json({ sõnum: "Te ei ole autentitud" });
 }
}

Sellel joonisel uurib funktsioon Edge küpsist autentimisloa leidmiseks ja kui see leitakse, genereerib kasutaja teabega JSON-vastuse.

4. A/B test

Teine võimalus Next.js'i Edge'i funktsioonide kasutamiseks on veebirakenduse jõudluse optimeerimine A/B-testimise abil. A/B-testimise abil saate võrrelda veebisaidi või rakenduse erinevaid versioone, et teha kindlaks, milline neist töötab paremini.

Näide selle kohta, kuidas Next.js'i Edge'i funktsioone saab A/B-testimiseks kasutada, on järgmine.

// pages/api/abtest.js
konst variandid = ['variantA', 'variantB'];
eksportidavaikimisifunktsioonikäitleja(req, res) {
konst { userId } = req.query;
// Loo kasutaja jaoks juhuslik variant
konst variantIndeks = matemaatika.floor(matemaatika.random() * variandid.length);
konst variant = variandid[variantIndex];
// Salvestage variant küpsisesse
 res.setHeader("Set-Cookie", `variant=${variant}; Max-Age=604800;`);
// Renderdage vastav variant
kui (variant 'variantA') {
 res.status(200).saada("Tere tulemast varianti A!");
 } muidu {
 res.status(200).saada("Tere tulemast varianti B!");
 }
}

See kood demonstreerib API liidese lõpp-punkti, mis käivitab saidi lehe kahe unikaalse variatsiooni A/B-testi. See kasutab Math.random() meetod kasutaja jaoks juhusliku variandi loomiseks ja salvestab selle koos küpsisega res.setHeader meetod. See võimaldab koodil tagada, et klient näeks tulevastel külastustel sama variatsiooni.

Seejärel kasutab kood variant küpsise väärtus sobiva variandi renderdamiseks. See kuvab teate, mis näitab, millise variandi see valis.

Edge'i funktsioone kasutades saavad arendajad kasutada võimsat tööriista, mida nimetatakse A/B-testimiseks, et võrrelda rakenduse või veebilehe erinevaid versioone, et näha, milline neist töötab paremini. Saate koguda andmeid kasutajate käitumise kohta ning parandada veebirakenduse jõudlust ja kasutuskogemust, määrates kasutajad juhuslikult erinevatele variantidele.

5. Vastuste vahemällu salvestamine

Reaktsioonide salvestamine on veel üks viis, kuidas saate kasutada Edge'i võimalusi rakenduses Next.js, et lihtsustada veebi täitmist. See võimaldab meil teatud aja jooksul reaktsioone säilitada, et vähendada serverile tehtavate päringute arvu ja töötada veebirakenduse kiirusega.

Siin on näide selle kohta, kuidas saate Edge Capabilities abil reaktsiooni salvestada rakenduses Next.js.

// pages/api/data.js
konst andmed = { nimi: "John Doe", vanus: 30 };
eksportidavaikimisifunktsioonikäitleja(req, res) {
// Vahemällu salvestamise lubamiseks määrake vastuse päised
 res.setHeader("vahemälu juhtimine", 's-maxage=10, aegunud-while-revalidate');
// Andmete tagastamine
 res.status(200.json (andmed);
}

See näide määratleb API lõpp-punkti, mis tagastab JSON-vastuse koos teatud andmetega.

Määrasime reaktsiooni päised, kasutades res.setHeader tehnikat, mis võimaldab reserveerida 10 sekundit kasutades s-max-vanus piiri. See näitab, et CDN suudab vastuse vahemällu salvestada kuni kümme sekundit, enne kui see nõuab värskendamist.

Kasutame ka aegunud-samal ajal-uuesti kinnitama parameeter, mis võimaldab CDN-il teenindada vahemällu salvestatud vastust, mis on aegunud, kui taustal uut vastust tehakse. Isegi kui vahemällu salvestatud vastus on aegunud, loob CDN uue ja saadab alati vastuse.

Edge funktsioonide vastuste vahemällu salvestamine on suurepärane viis veebirakenduse kiirendamiseks ja serverile saadetavate päringute arvu vähendamiseks. Saate tagada kasutajatele kiiremad ja reageerivamad veebisaidid, salvestades vastused etteantud ajaks vahemällu.

Edge-funktsioonid on rakenduse Next.js uskumatult võimas funktsioon

Next.js'i Edge'i funktsioonide tugi on veenev funktsioon, mis võimaldab teil käivitada kohandatud serverita funktsioone äärevõrgus lõppkasutajale lähemal.

Edge'i funktsioone saate veebirakenduste täiustamiseks kasutada mitmel viisil: A/B testimine, vastuste vahemällu salvestamine, dünaamiline marsruutimine, andmete toomine, autentimine.

Edge'i võimaluste kasutamine oma arhitektuuris võib parandada teie klientide kasutuskogemust ning tulemuseks on kiiremad ja reageerivamad veebirakendused.