Ce sunt funcțiile Edge în Next.js? 5 moduri în care le poți folosi

Next.js este un cadru popular, open-source, pentru dezvoltarea aplicațiilor React redate pe server. Datorită ușurinței de utilizare și adaptabilității, îl puteți folosi pentru a crea aplicații web complexe.

Funcțiile Edge sunt una dintre cele mai interesante caracteristici ale Next.js. Aflați despre funcțiile Edge și cinci moduri de a le folosi în Next.js.

Ce sunt funcțiile Edge?

Caracteristica puternică de funcții Edge a Next.js vă permite să rulați funcții personalizate fără server mai aproape de utilizatorul final din rețeaua edge. Acest lucru implică faptul că codul rulează pe servere găsite geografic mai aproape de client, aducând performanță mai rapidă și mai mare în aplicațiile web.

Funcțiile Edge pot modifica cererea sau răspunsul, pot prelua date, se pot autentifica și multe altele.

Funcțiile Edge rulează instantaneu. Deoarece reduc timpul necesar pentru încărcarea datelor și randarea paginilor, puteți utiliza funcțiile Edge pentru a îmbunătăți performanța web și experiența utilizatorului.

Au nevoie de gadgeturi moderne și de ultimă generație edge computing pentru că este mai de încredere și mai sigură decât cloud computing și folosește funcțiile Edge. În plus, este mai capabil și mai flexibil decât calcularea singură pe dispozitiv.

Iată câteva modalități în care puteți utiliza funcțiile Edge în Next.js.

1. Rutare dinamică

O modalitate prin care puteți utiliza funcțiile Edge în Next.js este rutarea dinamică. Puteți defini și gestiona rute personalizate pe baza datelor dinamice, cum ar fi parametrii de interogare sau anteturile solicitărilor.

Acest lucru este valoros pentru a face aplicații web mai adaptabile și mai dinamice, care se ocupă de diverse solicitări.

Puteți utiliza funcțiile Edge Next.js pentru a implementa rutarea dinamică în felul următor:

// pages/api/[slug].js
exportMod implicitfuncţiemanipulator(cerere, res) {
const { slug } = req.query;
dacă (melc 'despre') {
 starea res.(200).trimite('Aceasta este pagina despre!');
 } altfeldacă (melc 'a lua legatura') {
 starea res.(200).trimite('Aceasta este pagina de contact!');
 } altfel {
 starea res.(404).trimite('Pagina nu a fost gasita.');
 }
}

Acest exemplu arată conținutul unui fișier numit [slug.js] în pagini/api director pentru a defini o rută personalizată cu date dinamice. Limita slug-ului este apoi eliminată din interogarea cererii folosind cerere.interogare, care vă permite să faceți față cerințelor puternic bazate pe valoarea melc.

De exemplu, dacă un utilizator merge la http://example.com/api/about, parametrul slug va fi setat la despre. The manipulator funcția va rula blocul de cod corespunzător și va afișa mesajul „Aceasta este pagina despre!”

Dacă clientul vizitează http://example.com/api/contact, manipulator va returna mesajul "Aceasta este pagina de contact!"

Folosind funcțiile Edge pentru rutarea dinamică, dezvoltatorii pot crea aplicații web mai adaptabile și mai dinamice, care pot gestiona diverse solicitări bazate pe modificarea datelor.

2. Preluarea datelor

În Next.js, un caz comun de utilizare pentru funcțiile Edge este preluarea datelor. Puteți reduce sarcina de pe server și puteți crește performanța aplicației web prin aducerea datelor la periferie.

Funcțiile Edge ale Next.js pot efectua preluarea datelor, așa cum se arată în acest exemplu:

// pages/api/users/[id].js
exportMod implicitasincronfuncţiemanipulator(cerere, res) {
const { id } = req.query;
// Preluați datele utilizatorului de la un API terță parte
const răspuns = așteaptă aduce(` https://api.example.com/users/${id}`);
const utilizator = așteaptă răspuns.json();
// Returnează datele utilizatorului
 starea res.(200).json (utilizator);
}

Acest exemplu definește un punct final API care utilizează id parametru de interogare pentru a prelua datele utilizatorului dintr-un API terță parte. Folosind aduce metoda, puteți trimite o solicitare către API și apoi puteți aștepta un răspuns cu cuvântul cheie await.

Codul extrage apoi informațiile JSON prin apelare response.json() și îl stochează într-o variabilă. În cele din urmă, folosește json metoda răspunsului pentru a formata datele răspunsului ca JSON.

Preluarea datelor cu funcția Edge este o tehnică puternică care vă permite să preluați date la margine, reducând încărcarea serverului și îmbunătățind performanța aplicației web.

De asemenea, puteți reduce inactivitatea cererii și puteți oferi clienților pagini mai rapide și mai receptive, obținând informații de la o interfață de programare externă la margine.

3. Folosit în autentificare

Prin implementarea regulilor de control al accesului la margine, puteți îmbunătăți securitatea aplicației dvs. web și puteți reduce riscul accesului neautorizat la datele sensibile.

Ca exemplu, luați în considerare o funcție care verifică starea de autentificare a unui client și o ecou înapoi în răspuns. Iată o schiță a verificării care implică capabilitățile Edge în Next.js:

// pages/api/auth.js
exportMod implicit (req, res) => {
const { isAuthenticated } = req.cookies;
dacă (este autentificat) {
 starea res.(200).json({ mesaj: „Ești autentificat” });
 } altfel {
 starea res.(401).json({ mesaj: „Nu sunteți autentificat” });
 }
}

În această ilustrație, funcția Edge examinează cookie-ul pentru un token de autentificare și, dacă este găsit, generează un răspuns JSON cu informațiile utilizatorului.

4. Testul A/B

Un alt mod în care puteți utiliza funcțiile Edge ale Next.js este să optimizați performanța unei aplicații web folosind testarea A/B. Puteți compara diferite versiuni ale unui site sau aplicație utilizând testarea A/B pentru a determina care dintre ele are performanțe mai bune.

O ilustrare a modului în care funcțiile Edge ale Next.js pot fi utilizate pentru a efectua testarea A/B este următoarea:

// pages/api/abtest.js
const variante = [„variantaA”, „variantaB”];
exportMod implicitfuncţiemanipulator(cerere, res) {
const { userId } = req.query;
// Generați o variantă aleatorie pentru utilizator
const variantIndex = Matematică.podea(Matematică.random() * variante.lungime);
const varianta = variante[variantIndex];
// Stocați varianta într-un cookie
 res.setHeader(„Set-Cookie”, `varianta=${variant}; Max-Age=604800;`);
// Redați varianta corespunzătoare
dacă (variantă „variantaA”) {
 starea res.(200).trimite(„Bine ați venit la varianta A!”);
 } altfel {
 starea res.(200).trimite(„Bine ați venit la varianta B!”);
 }
}

Acest cod demonstrează un punct final de interfață API care rulează un test A/B pentru două variante unice ale unei pagini de site. Acesta folosește Math.random() metodă de a crea o variantă aleatorie pentru utilizator și o stochează într-un cookie cu res.setHeader metodă. Acest lucru permite codului să se asigure că clientul vede aceeași variație în vizitele viitoare.

Codul folosește apoi variantă valoarea cookie-ului pentru a reda varianta corespunzătoare. Afișează un mesaj care indică ce variantă a selectat.

Folosind funcțiile Edge, dezvoltatorii pot folosi un instrument puternic numit testare A/B pentru a compara diferite versiuni ale unei aplicații sau pagini web pentru a vedea care dintre ele are performanțe mai bune. Puteți colecta date despre comportamentul utilizatorilor și puteți îmbunătăți performanța aplicației web și experiența utilizatorului prin alocarea aleatorie a utilizatorilor la diferite variante.

5. Memorarea în cache a răspunsurilor

Stocarea reacțiilor este o altă modalitate prin care puteți utiliza capacitățile Edge din Next.js pentru a eficientiza execuția web. Ne permite să păstrăm reacțiile pentru o anumită măsură de timp pentru a reduce numărul de solicitări făcute către server și pentru a lucra la viteza aplicației web.

Iată o ilustrare a modului în care puteți efectua stocarea reacțiilor cu Capabilitățile Edge în Next.js:

// pages/api/data.js
const date = { Nume: „John Doe”, vârstă: 30 };
exportMod implicitfuncţiemanipulator(cerere, res) {
// Setați antetele de răspuns pentru a activa stocarea în cache
 res.setHeader(„Control cache”, 's-maxage=10, stale-while-revalidate');
// Returnează date
 starea res.(200).json (date);
}

Acest exemplu definește un punct final API care returnează un răspuns JSON cu unele date.

Setăm anteturile de reacție folosind res.setHeader tehnică pentru a permite rezervarea timp de 10 secunde folosind s-max-varsta limite. Aceasta indică faptul că CDN-ul poate stoca în cache răspunsul timp de până la zece secunde înainte de a necesita o reîmprospătare.

De asemenea, folosim învechit-în timp ce-revalidează parametru pentru a permite CDN-ului să servească un răspuns în cache care a expirat în timp ce se face un răspuns nou în fundal. Chiar dacă răspunsul din cache a expirat, CDN-ul va genera unul nou și va trimite întotdeauna un răspuns.

Memorarea în cache a răspunsului funcțiilor Edge este o modalitate excelentă de a accelera aplicația web și de a reduce numărul de solicitări către server. Puteți garanta utilizatorilor site-uri web mai rapide și mai receptive prin memorarea în cache a răspunsurilor pentru un timp prestabilit.

Funcțiile Edge sunt o caracteristică incredibil de puternică a Next.js

Suportul Next.js pentru funcțiile Edge este o caracteristică convingătoare care vă permite să rulați funcții personalizate, fără server, mai aproape de utilizatorul final din rețeaua edge.

Există mai multe moduri în care puteți utiliza funcțiile Edge pentru a îmbunătăți aplicațiile web: testare A/B, stocarea în cache a răspunsurilor, rutare dinamică, preluarea datelor, autentificare.

Utilizarea capabilităților Edge în arhitectura dvs. poate îmbunătăți experiența clienților dvs. și poate duce la aplicații web mai rapide și mai receptive.