Come utilizzare le azioni del server Next.js

La versione 13.4 di Next.js è arrivata con un router app stabile e la possibilità di eseguire la mutazione dei dati con le azioni del server. Questa funzione è un punto di svolta assoluto perché ti consente di eseguire mutazioni dei dati interamente dai componenti del server. Ciò comporta una serie di vantaggi in aree come velocità, sicurezza e prestazioni complessive dell'app.

Scopri cosa sono le azioni del server e come utilizzare questa nuova funzionalità nella tua applicazione Next.js.

Cosa sono le azioni del server?

Le azioni del server ti consentono di scrivere funzioni lato server una tantum insieme ai componenti del server. Questo è enorme perché non è più necessario scrivere percorsi API quando si inviano moduli o si esegue qualsiasi altro tipo di mutazione dei dati, incluso Mutazioni dei dati GraphQL.

Puoi avere funzioni che vengono eseguite sul tuo server e puoi quindi chiamarle dai componenti client o server. Questa è una funzionalità alfa in Next.js 13.4 ed è basata su React Actions. L'utilizzo delle azioni del server comporta una riduzione del codice JavaScript lato client e può aiutarti a creare moduli progressivamente migliorati.

Esempio di azioni del server

Con le azioni del server, puoi eseguire mutazioni all'interno di Next.js, sul server. Dai un'occhiata a questa nuova funzionalità con una pagina Next.js di esempio che visualizza un modulo che ti consente di creare un post.

Ecco le importazioni:

importare Collegamento da"successivo/collegamento"
importare FormGroup da"@/componenti/FormGroup"
importare { riconvalidaTag } da"successivo/cache"
importare { reindirizzare } da"successivo/navigazione"

Ora per il codice per creare il post. Questa funzione è un'azione del server; viene eseguito sul server e invia il titolo e il corpo del post all'API (che crea il post nel database):

asincronofunzionecreatePost(dati) {
"usa il server"
cost titolo = dati.get("titolo")
cost corpo = dati.get("corpo")
aspetta andare a prendere(" http://127.0.0.1/posts", {
 intestazione: {"Tipo di contenuto": "applicazione/json"},
 metodo: POSTA,
 corpo: JSON.stringify({titolo, corpo})
 })
 riconvalidaTag("post")
 reindirizzare("/")
}

Questa funzione ottiene il titolo e il corpo del post che poi invia al /posts endpoint tramite una richiesta POST. Quindi forza la cache ad aggiornare il contenuto associato al tag "posts" e reindirizza alla home page.

Ecco un form per raccogliere il titolo e il corpo del nuovo post:

esportarepredefinito NewPostForm() {
ritorno (





"titolo">Titolo</label>
"testo" nome="titolo" id="titolo" />
 </FormGroup>
 </div>




"titolo">Corpo</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Salva <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Puoi vedere che il modulo non contiene alcuna logica relativa alla creazione del post, solo un'azione del modulo: la funzione <strong>createPost()</strong>. Ricordiamo che la funzione createPost ha la direttiva "use server" che dichiara che tutto in that la funzione dovrebbe essere eseguita sul server.</p> <p>Tutto il codice è in esecuzione sul server e il tuo client non sa nulla a proposito. Questo perché il modulo è un componente server e non c'è nulla che viene reso dinamicamente sul file client.</p> <p>Quando fai clic sul pulsante <strong>Salva</strong>, Next.js chiama <strong>createPost()</strong> funzione. Questo invia il titolo e il corpo come dati del modulo, che vengono inviati all'API locale per salvare le informazioni.</p> <h2 id="revalidating-the-post"> Riconvalida del post </h2> <p>In fondo alla funzione <strong>createPost()</strong> c'è la seguente riga di codice:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /codice> </code></pre> <p>Per capire cosa fa quella funzione, immagina di avere una pagina di post. All'interno del componente post, chiameresti una funzione chiamata <strong>getPosts()</strong> per ottenere tutti i post dal tuo database e renderli visibili all'utente:</p> <pre> <code><span>export</span> <span>default</span> <span>async</span> <span><span>function</span> <span>Post</span>() span>{<br> <span>const</span> posts = <span>aspetta</span> getPosts()</span></code><p><code> <span>return</span> (<br> <div>
<br> {posts.map(<span><span>post</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>La funzione <strong>getPosts()</strong> sarebbe simile a questa:</p> <pre> <code><span>async</span> <span><span>funzione</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>wait</span> recupera(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> next: {<span>tags</span>: [<span>"posts"</span>], <span>revalidate</span>: <span>3600</span> }<br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Questa funzione trasmette l'opzione <strong>successiva</strong> al recupero, consentendoti di impostare un periodo di riconvalida. Per impostazione predefinita, ogni singola richiesta di recupero effettuata all'interno del componente server viene memorizzata nella cache per sempre. Tenere traccia della cache e aggiornarla quando necessario è una parte importante del <span>recupero dei dati Next.js</span>.</p> <p>Il codice precedente indica a Next.js di memorizzare nella cache i dati dei <strong>post</strong> per un massimo di un'ora (3.600 secondi). Dopo un'ora, i dati diventano obsoleti e Next.js li aggiorna per ottenere i dati più recenti dal database.</p> <p>Ricordalo la funzione <strong>createPost()</strong> chiama <strong>revalidateTag("posts")</strong> una volta terminato il resto del suo lavoro. Ciò costringe Next.js a recuperare nuovamente i dati che dovrebbero includere il nuovo post appena creato dall'app.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Prova che il tuo codice è in esecuzione sul server </h2> <p>Per essere certi che tutto il codice sia in esecuzione sul server, è possibile aggiungere la seguente istruzione di log della console all'interno del file Funzione <strong>createPost()</strong>:</p> <pre> <code><span>console</span>.log(<span>"In esecuzione sul server"</span>)</code> </pre> <p>Quindi, prova a creare un nuovo post facendo clic sul pulsante di invio. Se il tuo codice è in esecuzione sul server, quel messaggio di registro verrà visualizzato sul tuo terminale. Ma se è in esecuzione sul client, il registro verrà visualizzato nella console del browser.</p> <p>Questo rende sicuro mettere dati sensibili informazioni come variabili ambientali, connessioni al database e password sul server senza timore che vengano esposte al cliente. Puoi quindi <span>leggere le stringhe dal tuo file .env</span> nella tua app Next.js.</p> <p>Puoi desidera riservare l'uso delle azioni del server per le versioni di Next.js successive alla 13.4, in particolare in produzione. Ma è comunque davvero emozionante vedere dove va questa funzione poiché spinge costantemente ciò che puoi fare spostando sempre più cose sul server. Dovrebbe rendere le tue app client più facili da scrivere e il processo di sviluppo molto più piacevole.</p> <h2 id="learn-more-about-migrating-to-next-js"> Ulteriori informazioni sulla migrazione a Next .js </h2> <p>Molti sviluppatori front-end utilizzano React per lo sviluppo dell'interfaccia utente. Ma grazie a funzionalità come il rendering lato server e la generazione di siti statici, molti di questi sviluppatori stanno migrando le proprie app per utilizzare Next.js. Questa migrazione è molto semplice poiché React è abbastanza simile alla sintassi di Next.js.</p> <p>Le prestazioni aggiuntive e il potenziamento della sicurezza richiedono una migrazione ancora maggiore. La possibilità di avere componenti lato server, unita alle nuove azioni del server che abbiamo appena trattato, rende Next.js un'opzione più sicura e performante rispetto al semplice React. Come sviluppatore React, dovresti imparare a migrare la tua app su Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>