Cosa sono le funzioni Edge in Next.js? 5 modi in cui puoi usarli

Next.js è un popolare framework open source per lo sviluppo di applicazioni React con rendering lato server. Grazie alla sua facilità d'uso e adattabilità, puoi usarlo per creare applicazioni web complesse.

Le funzioni Edge sono una delle funzionalità più interessanti di Next.js. Scopri le funzioni Edge e cinque modi per utilizzarle in Next.js.

Cosa sono le funzioni di bordo?

La potente funzionalità delle funzioni Edge di Next.js ti consente di eseguire funzioni serverless personalizzate più vicino all'utente finale sulla rete edge. Ciò implica che il codice viene eseguito su server situati geograficamente più vicini al client, determinando prestazioni più rapide e migliori nelle applicazioni web.

Le funzioni edge possono modificare la richiesta o la risposta, recuperare i dati, eseguire l'autenticazione e altro ancora.

Le funzioni Edge vengono eseguite all'istante. Poiché riducono il tempo necessario per caricare i dati e il rendering delle pagine, puoi utilizzare le funzioni Edge per migliorare le prestazioni Web e l'esperienza utente.

Necessità di gadget moderni e di nuova generazione informatica perimetrale perché è più affidabile e sicuro di cloud computing e sfrutta le funzioni Edge. Inoltre, è più capace e flessibile rispetto al solo calcolo sul dispositivo.

Ecco alcuni modi in cui puoi utilizzare le funzioni Edge in Next.js.

1. Instradamento dinamico

Un modo per utilizzare le funzioni Edge in Next.js è tramite il routing dinamico. Puoi definire e gestire percorsi personalizzati basati su dati dinamici, come parametri di query o intestazioni di richiesta.

Questo è prezioso per creare applicazioni web più adattabili e dinamiche che si occupano di varie richieste.

Puoi utilizzare le funzioni Edge di Next.js per implementare il routing dinamico nel modo seguente:

// pagine/api/[slug].js
esportarepredefinitofunzionegestore(richiesta, ris) {
cost {slug} = req.query;
Se (lumaca 'Di') {
 res.stato(200).Inviare('Questa è la pagina delle informazioni!');
 } altroSe (lumaca 'contatto') {
 res.stato(200).Inviare('Questa è la pagina dei contatti!');
 } altro {
 res.stato(404).Inviare('Pagina non trovata.');
 }
}

Questo esempio mostra il contenuto di un file denominato [slug.js] nel pagine/api directory per definire un percorso personalizzato con dati dinamici. Il limite slug viene quindi rimosso dalla query di richiesta utilizzando req.query, che consente di affrontare esigenze fortemente fondate sul valore del lumaca.

Ad esempio, se un utente va a http://example.com/api/about, il parametro slug sarà impostato su Di. IL gestore la funzione eseguirà il blocco di codice appropriato e visualizzerà il messaggio "Questa è la pagina delle informazioni!"

Se il cliente visita http://example.com/api/contact, gestore restituirà il messaggio "Questa è la pagina dei contatti!"

Utilizzando le funzioni Edge per il routing dinamico, gli sviluppatori possono creare applicazioni Web più adattabili e dinamiche in grado di gestire varie richieste in base alla modifica dei dati.

2. Recupero dati

In Next.js, un caso d'uso comune per le funzioni Edge è il recupero dei dati. Puoi ridurre il carico sul server e migliorare le prestazioni dell'applicazione Web portando i dati all'edge.

Le funzioni Edge di Next.js possono eseguire il recupero dei dati, come mostrato in questo esempio:

// pagine/api/users/[id].js
esportarepredefinitoasincronofunzionegestore(richiesta, ris) {
cost { id } = req.query;
// Recupera i dati utente da un'API di terze parti
cost risposta = aspetta andare a prendere(` https://api.example.com/users/${id}`);
cost utente = aspetta risposta.json();
// Restituisce i dati dell'utente
 res.stato(200).json (utente);
}

Questo esempio definisce un endpoint API che utilizza il id parametro di query per recuperare i dati utente da un'API di terze parti. Usando il andare a prendere metodo, puoi inviare una richiesta all'API e quindi attendere una risposta con la parola chiave await.

Il codice quindi estrae le informazioni JSON chiamando risposta.json() e lo memorizza in una variabile. Infine, utilizza il json metodo della risposta per formattare i dati della risposta come JSON.

Il recupero dei dati della funzione Edge è una tecnica potente che consente di recuperare i dati all'edge, riducendo il carico del server e migliorando le prestazioni delle applicazioni web.

Allo stesso modo, puoi ridurre l'ozio della domanda e offrire ai clienti pagine più veloci e reattive ottenendo informazioni da un'interfaccia di programmazione esterna all'edge.

3. Utilizzato nell'autenticazione

Implementando le regole di controllo degli accessi all'edge, puoi migliorare la sicurezza della tua app Web e ridurre il rischio di accesso non autorizzato a dati sensibili.

Ad esempio, si consideri una funzione che controlla lo stato di autenticazione di un client e lo riporta nella risposta. Ecco uno schema della verifica che coinvolge le funzionalità Edge in Next.js:

// pagine/api/auth.js
esportarepredefinito (req, res) => {
cost { isAuthenticated } = req.cookies;
Se (è autenticato) {
 res.stato(200).json({ Messaggio: "Sei autenticato" });
 } altro {
 res.stato(401).json({ Messaggio: 'Non sei autenticato' });
 }
}

In questa illustrazione, la funzione Edge esamina il cookie per un token di autenticazione e, se trovato, genera una risposta JSON con le informazioni dell'utente.

4. Il test A/B

Un altro modo per utilizzare le funzioni Edge di Next.js consiste nell'ottimizzare le prestazioni di un'applicazione Web utilizzando il test A/B. Puoi confrontare varie versioni di un sito Web o di un'applicazione utilizzando il test A/B per determinare quale funziona meglio.

Un'illustrazione di come le funzioni Edge di Next.js possono essere utilizzate per eseguire test A/B è la seguente:

// pagine/api/abtest.js
cost varianti = ['variante A', 'variante B'];
esportarepredefinitofunzionegestore(richiesta, ris) {
cost {userId} = req.query;
// Genera una variante casuale per l'utente
cost indicevariante = Matematica.pavimento(Matematica.random() * varianti.lunghezza);
cost variante = varianti[indicevariante];
// Memorizza la variante in un cookie
 res.setHeader('Set-Cookie', `variante=${variante}; Max-Età=604800;`);
// Visualizza la variante corrispondente
Se (variante 'variante A') {
 res.stato(200).Inviare("Benvenuti nella variante A!");
 } altro {
 res.stato(200).Inviare("Benvenuti nella variante B!");
 }
}

Questo codice illustra un endpoint dell'interfaccia API che esegue un test A/B per due varianti univoche di una pagina del sito. Utilizza il Matematica.casuale() metodo per creare una variante casuale per l'utente e la memorizza in un cookie con il res.setHeader metodo. Ciò consente al codice di garantire che il cliente veda la stessa variazione nelle visite future.

Il codice utilizza quindi il variante il valore del cookie per rendere la variante appropriata. Visualizza un messaggio che indica quale variante è stata selezionata.

Utilizzando le funzioni Edge, gli sviluppatori possono utilizzare un potente strumento chiamato test A/B per confrontare diverse versioni di un'applicazione o di una pagina Web per vedere quale funziona meglio. Puoi raccogliere dati sul comportamento degli utenti e migliorare le prestazioni e l'esperienza utente dell'applicazione Web assegnando in modo casuale gli utenti a varie varianti.

5. Risposte di memorizzazione nella cache

L'archiviazione delle reazioni è un altro modo per utilizzare le funzionalità Edge in Next.js per semplificare l'esecuzione web. Ci permette di mantenere le reazioni per un determinato lasso di tempo per ridurre il numero di richieste fatte al server e lavorare sulla velocità dell'applicazione web.

Ecco un'illustrazione di come eseguire l'archiviazione delle reazioni con Edge Capabilities in Next.js:

// pagine/api/data.js
cost dati = { nome: 'Giovanni Rossi', età: 30 };
esportarepredefinitofunzionegestore(richiesta, ris) {
// Imposta le intestazioni di risposta per abilitare la memorizzazione nella cache
 res.setHeader('Controllo della cache', 's-maxage=10, obsoleto durante la riconvalida');
// Restituisce i dati
 res.stato(200.json (dati);
}

Questo esempio definisce un endpoint API che restituisce una risposta JSON con alcuni dati.

Impostiamo le intestazioni di reazione usando il res.setHeader tecnica per abilitare la prenotazione per 10 secondi utilizzando il s-max-età confine. Ciò indica che il CDN può memorizzare nella cache la risposta per un massimo di dieci secondi prima di richiedere un aggiornamento.

Usiamo anche il obsoleto durante la riconvalida parametro per consentire al CDN di fornire una risposta memorizzata nella cache che è scaduta mentre viene effettuata una nuova risposta in background. Anche se la risposta memorizzata nella cache è scaduta, il CDN ne genererà una nuova e invierà sempre una risposta.

La memorizzazione nella cache delle risposte delle funzioni Edge è un modo eccellente per velocizzare l'applicazione Web e ridurre il numero di richieste al server. Puoi garantire agli utenti siti Web più veloci e più reattivi memorizzando nella cache le risposte per un tempo predeterminato.

Le funzioni Edge sono una caratteristica incredibilmente potente di Next.js

Il supporto di Next.js per le funzioni Edge è una caratteristica interessante che ti consente di eseguire funzioni serverless personalizzate più vicino all'utente finale sulla rete edge.

Esistono diversi modi in cui è possibile utilizzare le funzioni Edge per migliorare le applicazioni Web: test A/B, memorizzazione nella cache delle risposte, routing dinamico, recupero dei dati, autenticazione.

L'utilizzo delle funzionalità Edge nella tua architettura può migliorare l'esperienza dei tuoi clienti e portare ad applicazioni web più veloci e reattive.