Kas ir Edge funkcijas vietnē Next.js? 5 veidi, kā tos izmantot

Next.js ir populārs atvērtā pirmkoda ietvars servera puses renderētu React lietojumprogrammu izstrādei. Pateicoties ērtai lietošanai un pielāgojamībai, varat to izmantot, lai izveidotu sarežģītas tīmekļa lietojumprogrammas.

Edge funkcijas ir viena no Next.js aizraujošākajām funkcijām. Uzziniet par Edge funkcijām un pieciem veidiem, kā tās izmantot vietnē Next.js.

Kas ir malu funkcijas?

Next.js jaudīgā Edge funkciju funkcija ļauj palaist pielāgotas bezservera funkcijas tuvāk gala lietotājam malas tīklā. Tas nozīmē, ka kods darbojas serveros, kas atrodas ģeogrāfiski tuvāk klientam, tādējādi nodrošinot ātrāku un lielāku tīmekļa lietojumprogrammu veiktspēju.

Edge funkcijas var mainīt pieprasījumu vai atbildi, iegūt datus, autentificēt un veikt citas darbības.

Edge funkcijas darbojas uzreiz. Tā kā tie samazina laiku, kas nepieciešams datu ielādei un lapu renderēšanai, varat izmantot Edge funkcijas, lai uzlabotu tīmekļa veiktspēju un lietotāja pieredzi.

Nepieciešami mūsdienīgi un nākamās paaudzes sīkrīki malu skaitļošana jo tas ir uzticamāks un drošāks nekā mākoņdatošana un izmanto Edge funkcijas. Turklāt tas ir spējīgāks un elastīgāks nekā tikai skaitļošana ierīcē.

Tālāk ir norādīti daži veidi, kā lietotnē Next.js varat izmantot Edge funkcijas.

1. Dinamiskā maršrutēšana

Viens no veidiem, kā lietotnē Next.js varat izmantot Edge funkcijas, ir dinamiskā maršrutēšana. Varat definēt un pārvaldīt pielāgotus maršrutus, pamatojoties uz dinamiskiem datiem, piemēram, vaicājuma parametriem vai pieprasījumu galvenēm.

Tas ir vērtīgi, lai padarītu pielāgojamākas un dinamiskākas tīmekļa lietojumprogrammas, kas nodarbojas ar dažādiem pieprasījumiem.

Varat izmantot Next.js Edge funkcijas, lai ieviestu dinamisko maršrutēšanu šādā veidā:

// pages/api/[slug].js
eksportētnoklusējumafunkcijuapdarinātājs(req, res) {
konst { slug } = req.query;
ja (glieme 'par') {
 res.status(200).nosūtīt("Šī ir lapa par!");
 } citsja (glieme 'kontakts') {
 res.status(200).nosūtīt('Šī ir kontaktu lapa!');
 } cits {
 res.status(404).nosūtīt('Lapa nav atrasta.');
 }
}

Šis piemērs parāda faila ar nosaukumu saturu [slug.js] iekš lapas/api direktoriju, lai definētu pielāgotu maršrutu ar dinamiskiem datiem. Pēc tam lodes robeža tiek noņemta no pieprasījuma vaicājuma, izmantojot req.query, kas ļauj jums tikt galā ar prasībām, kas spēcīgi balstās uz vērtību gliemeža.

Piemēram, ja lietotājs dodas uz http://example.com/api/about, tiks iestatīts slug parametrs par. The apdarinātājs funkcija palaidīs atbilstošo koda bloku un parādīs ziņojumu "Šī ir lapa par!"

Ja klients apmeklē http://example.com/api/contact, apdarinātājs atgriezīs ziņojumu "Šī ir kontaktu lapa!"

Izmantojot Edge funkcijas dinamiskai maršrutēšanai, izstrādātāji var izveidot pielāgojamākas un dinamiskākas tīmekļa lietojumprogrammas, kas var apstrādāt dažādus pieprasījumus, pamatojoties uz mainīgajiem datiem.

2. Datu ienešana

Programmā Next.js viens izplatīts Edge funkciju lietošanas gadījums ir datu ielāde. Varat samazināt servera slodzi un uzlabot tīmekļa lietojumprogrammas veiktspēju, nodrošinot datus līdz malai.

Next.js Edge funkcijas var veikt datu iegūšanu, kā parādīts šajā piemērā:

// pages/api/users/[id].js
eksportētnoklusējumaasinhronāfunkcijuapdarinātājs(req, res) {
konst {id} = req.query;
// Iegūstiet lietotāja datus no trešās puses API
konst atbilde = gaidīt atnest(` https://api.example.com/users/${id}`);
konst lietotājs = gaidīt response.json();
// Atgriezt lietotāja datus
 res.status(200.json (lietotājs);
}

Šajā piemērā ir definēts API galapunkts, kas izmanto id vaicājuma parametrs, lai izgūtu lietotāja datus no trešās puses API. Izmantojot atnest metodi, varat nosūtīt pieprasījumu API un pēc tam gaidīt atbildi ar gaidīšanas atslēgvārdu.

Pēc tam kods izvelk JSON informāciju, zvanot response.json() un saglabā to mainīgajā. Visbeidzot, tas izmanto json atbildes metode, lai formatētu atbildes datus kā JSON.

Edge funkcijas datu ielāde ir jaudīgs paņēmiens, kas ļauj iegūt datus no malas, samazinot servera slodzi un uzlabojot tīmekļa lietojumprogrammu veiktspēju.

Varat arī samazināt pieprasījuma dīkstāvi un nodrošināt klientiem ātrākas, atsaucīgākas lapas, iegūstot informāciju no malas programmēšanas interfeisa no malas.

3. Izmanto autentifikācijā

Ieviešot piekļuves kontroles noteikumus pašā malā, varat uzlabot savas tīmekļa lietotnes drošību un samazināt nesankcionētas piekļuves risku sensitīviem datiem.

Piemēram, apsveriet funkciju, kas pārbauda klienta autentifikācijas stāvokli un atkārto to atbildē. Tālāk ir sniegts verifikācijas izklāsts, kas ietver Edge iespējas vietnē Next.js:

// pages/api/auth.js
eksportētnoklusējuma (req, res) => {
konst { isAuthenticated } = req.cookies;
ja (ir autentificēts) {
 res.status(200).json({ ziņa: "Jūs esat autentificēts" });
 } cits {
 res.status(401).json({ ziņa: "Jūs neesat autentificēts" });
 }
}

Šajā ilustrācijā funkcija Edge pārbauda, ​​vai sīkfailā nav autentifikācijas pilnvaras, un, ja tiek atrasts, ģenerē JSON atbildi ar lietotāja informāciju.

4. A/B tests

Vēl viens veids, kā izmantot Next.js Edge funkcijas, ir optimizēt tīmekļa lietojumprogrammas veiktspēju, izmantojot A/B testēšanu. Izmantojot A/B testēšanu, varat salīdzināt dažādas vietnes vai lietojumprogrammas versijas, lai noteiktu, kura no tām darbojas labāk.

Tālāk ir parādīts, kā Next.js Edge funkcijas var izmantot, lai veiktu A/B testēšanu.

// pages/api/abtest.js
konst varianti = ['variantA', 'variantB'];
eksportētnoklusējumafunkcijuapdarinātājs(req, res) {
konst { userId } = req.query;
// Ģenerējiet lietotājam nejaušu variantu
konst variantsIndekss = Matemātika.floor(Matemātika.random() * varianti.garums);
konst variants = varianti[variantIndex];
// Saglabājiet variantu sīkdatnē
 res.setHeader('Set-Cookie', `variants=${variant}; Maksimālais vecums=604800;`);
// Renderē atbilstošo variantu
ja (variants 'variantA') {
 res.status(200).nosūtīt("Laipni lūdzam variantā A!");
 } cits {
 res.status(200).nosūtīt("Laipni lūdzam variantā B!");
 }
}

Šis kods parāda API saskarnes galapunktu, kas veic A/B testu diviem unikāliem vietnes lapas variantiem. Tas izmanto Math.random() metode, lai izveidotu lietotājam nejaušu variantu un saglabātu to sīkfailā ar res.setHeader metodi. Tas ļauj kodam nodrošināt, ka turpmākajos apmeklējumos klients redz tādas pašas variācijas.

Pēc tam kods izmanto variants sīkfaila vērtību, lai renderētu atbilstošo variantu. Tiek parādīts ziņojums, kurā norādīts, kurš variants ir izvēlēts.

Izmantojot Edge funkcijas, izstrādātāji var izmantot jaudīgu rīku, ko sauc par A/B testēšanu, lai salīdzinātu dažādas lietojumprogrammas vai tīmekļa lapas versijas un noskaidrotu, kura no tām darbojas labāk. Varat apkopot datus par lietotāju uzvedību un uzlabot tīmekļa lietojumprogrammas veiktspēju un lietotāja pieredzi, nejauši piešķirot lietotājus dažādiem variantiem.

5. Atbilžu saglabāšana kešatmiņā

Reakciju glabāšana ir vēl viens veids, kā izmantot Edge iespējas programmā Next.js, lai racionalizētu tīmekļa izpildi. Tas ļauj mums saglabāt reakcijas noteiktu laiku, lai samazinātu serverim nosūtīto pieprasījumu skaitu un strādātu pie tīmekļa lietojumprogrammas ātruma.

Šeit ir piemērs tam, kā jūs varat veikt reakciju uzglabāšanu, izmantojot Edge iespējas vietnē Next.js:

// pages/api/data.js
konst dati = { nosaukums: "Džons Dū", vecums: 30 };
eksportētnoklusējumafunkcijuapdarinātājs(req, res) {
// Iestatiet atbildes galvenes, lai iespējotu saglabāšanu kešatmiņā
 res.setHeader("Kešatmiņas kontrole", 's-maxage=10, novecojis-while-revalidate');
// Atgriezt datus
 res.status(200.json (dati);
}

Šajā piemērā ir definēts API galapunkts, kas atgriež JSON atbildi ar dažiem datiem.

Mēs iestatījām reakcijas galvenes, izmantojot res.setHeader tehnika, kas ļauj rezervēt 10 sekundes, izmantojot s-maksimālais vecums robeža. Tas norāda, ka CDN var kešatmiņā saglabāt atbildi līdz desmit sekundēm, pirms tiek pieprasīta atsvaidzināšana.

Mēs arī izmantojam novecojis, bet atkārtoti apstiprināt parametrs, lai CDN apkalpotu kešatmiņā saglabātu atbildi, kuras derīguma termiņš ir beidzies, kamēr fonā tiek sniegta jauna atbilde. Pat ja kešatmiņā saglabātās atbildes derīguma termiņš ir beidzies, CDN ģenerēs jaunu un vienmēr nosūtīs atbildi.

Edge funkciju atbildes kešatmiņa ir lielisks veids, kā paātrināt tīmekļa lietojumprogrammu un samazināt serverim nosūtīto pieprasījumu skaitu. Varat garantēt lietotājiem ātrākas un atsaucīgākas vietnes, saglabājot atbildes kešatmiņā uz iepriekš noteiktu laiku.

Edge funkcijas ir neticami jaudīga Next.js funkcija

Next.js atbalsts Edge funkcijām ir pārliecinoša funkcija, kas ļauj palaist pielāgotas funkcijas bez servera tuvāk gala lietotājam malas tīklā.

Ir vairāki veidi, kā izmantot Edge funkcijas, lai uzlabotu tīmekļa lietojumprogrammas: A/B testēšana, atbildes kešatmiņa, dinamiskā maršrutēšana, datu ielāde, autentifikācija.

Edge iespēju izmantošana savā arhitektūrā var uzlabot jūsu klientu pieredzi un radīt ātrākas, atsaucīgākas tīmekļa lietojumprogrammas.