Cum să utilizați acțiunile serverului Next.js

Versiunea 13.4 a Next.js a venit cu un router de aplicație stabil și capacitatea de a face mutații de date cu acțiunile serverului. Această caracteristică este o schimbare absolută a jocului, deoarece vă permite să efectuați mutații de date în întregime din componentele serverului. Acest lucru aduce o serie de beneficii în domenii precum viteza, securitatea și performanța generală a aplicației.

Aflați ce sunt acțiunile serverului și cum să utilizați această nouă caracteristică în aplicația dvs. Next.js.

Ce sunt acțiunile serverului?

Acțiunile serverului vă permit să scrieți funcții unice de pe partea de server chiar alături de componentele serverului. Acest lucru este uriaș deoarece nu mai trebuie să scrieți rute API atunci când trimiteți formulare sau faceți orice alt tip de mutație de date, inclusiv Mutații ale datelor GraphQL.

Puteți avea funcții care rulează pe serverul dvs. și apoi le puteți apela de la componentele client sau server. Aceasta este o funcție alfa în Next.js 13.4 și este construită pe lângă React Actions. Utilizarea acțiunilor serverului duce la reducerea JavaScript la nivelul clientului și vă poate ajuta să creați formulare îmbunătățite progresiv.

Exemplu de acțiuni ale serverului

Cu acțiuni de server, puteți efectua mutații în interiorul Next.js, pe server. Aruncați o privire la această nouă caracteristică cu un exemplu de pagină Next.js care redă un formular permițându-vă să creați o postare.

Iată importurile:

import Legătură din„următorul/link”
import FormGroup din„@/components/FormGroup”
import { revalidateTag } din„următorul/cache”
import { redirecționare } din„următorul/navigație”

Acum pentru codul pentru a crea postarea. Această funcție este o acțiune de server; rulează pe server și trimite titlul și corpul postării către API (care creează postarea în baza de date):

asincronfuncţiecreatePost(date) {
"utilizați serverul"
const titlu = data.get("titlu")
const body = data.get("corp")
așteaptă aduce(" http://127.0.0.1/posts", {
 antet: {"Tipul de conținut": "aplicație/json"},
 metoda: POST,
 corp: JSON.stringify({titlu, corp})
 })
 revalidateTag("postări")
 redirecţiona("/")
}

Această funcție primește titlul și corpul postării pe care apoi le trimite către /posts punct final printr-o solicitare POST. Apoi forțează memoria cache să reîmprospăteze conținutul asociat cu eticheta „posts” și redirecționează înapoi la pagina de pornire.

Iată un formular pentru a colecta titlul și corpul postării noi:

exportMod implicit NewPostForm() {
întoarcere (





"titlu">Titlu</label>
"text" nume="titlu" id="titlu" />
 </FormGroup>
 </div>




"titlu">Corpul</label>
„text” name=<span>„corp”</span> id=<span>„corp”</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Salvare <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Puteți vedea că formularul nu conține nicio logică legată de crearea postării, ci doar o acțiune de formular: funcția <strong>createPost()</strong>. Amintiți-vă că funcția createPost are directiva „utilizați serverul” care declară că totul în aceasta funcția ar trebui să ruleze pe server.</p> <p>Tot codul rulează pe server, iar clientul tău nu știe nimic despre. Acest lucru se datorează faptului că formularul este o componentă de server și nu există nimic care să fie redat dinamic pe client.</p> <p>Când faceți clic pe butonul <strong>Salvați</strong>, Next.js apelează <strong>createPost()</strong> funcţie. Aceasta trimite titlul și corpul ca date de formular, care sunt postate în API-ul local pentru a salva informațiile.</p> <h2 id="revalidating-the-post"> Revalidarea postării </h2> <p>În partea de jos a funcției <strong>createPost()</strong> se află următoarea linie de cod:</p> <pre> <code>revalidateTags(<span>„posts”</span>)< /code> </code></pre> <p>Pentru a înțelege ce face această funcție, imaginați-vă că aveți o pagină de postări. În interiorul componentei de postări, ați apela o funcție numită <strong>getPosts()</strong> pentru a obține toate postările din baza de date și a le afișa pentru ca utilizatorul să le vadă:</p> <pre> <code><span>export</span> <span>implicit</span> <span>async</span> <span><span>funcție</span> <span>Postări</span>() span>{<br> <span>const</span> postări = <span>așteaptă</span> getPosts()</span></code><p><code> <span>întoarce</span> (<br> <div>
<br> {posts.map(<span><span>post</span> = ></span> {<br> <cheie postcard="{post.id}"></cheie><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>Funcția <strong>getPosts()</strong> ar arăta astfel:</p> <pre> <code><span>async</span> <span><span>funcție</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>așteaptă</span> aduce(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> următorul: {<span>etichete</span>: [<span>„postări”</span>], <span>revalidați</span>: <span>3600</span> }<br> })</code><p><code> <span>retur</span> res.json()<br>}<br></code>> </p></pre> <p>Această funcție transmite opțiunea <strong>următorul</strong> pentru a prelua, permițându-vă să setați o perioadă de revalidare. În mod implicit, fiecare cerere de preluare pe care o faceți în interiorul componentei server este stocată în cache pentru totdeauna. Urmărirea memoriei cache și reîmprospătarea acesteia atunci când este necesar este o parte importantă a <span>preluării datelor Next.js</span>.</p> <p>Codul de mai sus îi spune Next.js să memoreze în cache datele <strong>postărilor</strong> timp de până la o oră (3.600 de secunde). După o oră, datele devin învechite și Next.js le reîmprospătează pentru a obține cele mai recente date din baza de date.</p> <p>Rețineți că funcția <strong>createPost()</strong> apelează <strong>revalidateTag(„posts”)</strong> odată ce și-a încheiat restul lucrărilor. Acest lucru obligă Next.js să preia din nou acele date care ar trebui să includă noua postare pe care tocmai a creat-o aplicația.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Dovada că codul dvs. rulează pe server </h2> <p>Pentru a fi sigur că tot codul rulează pe server, puteți adăuga următoarea instrucțiune de jurnal de consolă în interiorul Funcția <strong>createPost()</strong>:</p> <pre> <code><span>consola</span>.log(<span>„Rulează pe server”</span>)</code> </pre> <p>Apoi, încercați să creați o postare nouă făcând clic pe butonul de trimitere. Dacă codul tău rulează pe server, acel mesaj de jurnal va apărea pe terminalul tău. Dar dacă rulează pe client, atunci jurnalul va apărea în consola browserului.</p> <p>Acest lucru face să fie sigură plasarea datelor sensibile. informații precum variabilele de mediu, conexiunile la baze de date și parolele de pe server, fără teama că acestea vor fi expuse la client. Apoi, puteți <span>să citiți șirurile din fișierul dvs. .env</span> în aplicația dvs. Next.js.</p> <p>Puteți doriți să rezervați utilizarea acțiunilor serverului pentru versiunile Next.js ulterioare 13.4, în special în producție. Dar este încă foarte interesant să vezi unde se duce această caracteristică, deoarece împinge în mod constant ceea ce poți face prin mutarea din ce în ce mai multe lucruri pe server. Ar trebui să facă aplicațiile client mai ușor de scris, iar procesul de dezvoltare a acestora să fie mult mai plăcut.</p> <h2 id="learn-more-about-migrating-to-next-js"> Aflați mai multe despre migrarea la următorul .js </h2> <p>Mulți dezvoltatori front-end folosesc React pentru dezvoltarea interfeței de utilizare. Dar datorită caracteristicilor precum redarea pe server și generarea de site-uri statice, mulți dintre acești dezvoltatori își migrează aplicațiile pentru a utiliza Next.js. Această migrare este foarte simplă, deoarece React este destul de similar cu Next.js din punct de vedere al sintaxelor.</p> <p>Performanța suplimentară și creșterea securității necesită migrarea și mai mult. Capacitatea de a avea componente pe partea serverului, împreună cu noile acțiuni de server pe care tocmai le-am acoperit, face din Next.js o opțiune mai sigură și mai performantă în comparație cu React simplu. În calitate de dezvoltator React, ar trebui să învățați cum să vă migrați aplicația la Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>