Sådan bruges Next.js Server Actions

13.4-udgivelsen af ​​Next.js kom med en stabil App-router og muligheden for at foretage datamutationer med serverhandlinger. Denne funktion er en absolut game changer, fordi den lader dig udføre datamutationer udelukkende fra serverkomponenter. Dette medfører et væld af fordele inden for områder som hastighed, sikkerhed og appens overordnede ydeevne.

Lær, hvad serverhandlinger er, og hvordan du bruger denne nye funktion i din Next.js-applikation.

Hvad er serverhandlinger?

Serverhandlinger giver dig mulighed for at skrive engangsfunktioner på serversiden lige ved siden af ​​dine serverkomponenter. Dette er enormt, fordi du ikke længere behøver at skrive API-ruter, når du indsender formularer eller foretager nogen anden form for datamutation, bl.a. GraphQL-datamutationer.

Du kan have funktioner, der kører på din server, og du kan derefter kalde dem fra klient- eller serverkomponenter. Dette er en alfafunktion i Next.js 13.4, og den er bygget oven på React Actions. Brug af serverhandlinger fører til reduceret JavaScript på klientsiden og kan hjælpe dig med at oprette progressivt forbedrede formularer.

Eksempel på serverhandlinger

Med serverhandlinger kan du udføre mutationer inde i Next.js på serveren. Tag et kig på denne nye funktion med et eksempel på Next.js-side, der gengiver en formular, der giver dig mulighed for at oprette et indlæg.

Her er importen:

importere Link fra"næste/link"
importere Formgruppe fra"@/components/FormGroup"
importere { revalidateTag } fra"næste/cache"
importere { omdirigere } fra"næste/navigation"

Nu til koden til at oprette indlægget. Denne funktion er en serverhandling; den kører på serveren og sender postens titel og brødtekst til API'et (som opretter posten i databasen):

asynkronfungereoprette Post(data) {
"brug server"
konst title = data.get("titel")
konst body = data.get("legeme")
vente hente(" http://127.0.0.1/posts", {
 header: {"Indholdstype": "applikation/json"},
 metode: POST,
 legeme: JSON.stringify({title, body})
 })
 revalidateTag("indlæg")
 omdirigere ("/")
}

Denne funktion får postens titel og brødtekst, som den derefter sender til /posts slutpunkt via en POST-anmodning. Det tvinger derefter cachen til at opdatere indhold forbundet med "indlæg"-tagget og omdirigerer tilbage til startsiden.

Her er en formular til at indsamle det nye indlægs titel og brødtekst:

eksportStandard NewPostForm() {
Vend tilbage (





"titel">Titel</label>
"tekst" navn="titel" id="titel" />
 </FormGroup>
 </div>




"titel">Krop</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>tekstområde</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Gem <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Du kan se, at formularen ikke indeholder nogen logik relateret til oprettelse af indlægget, kun en formularhandling: funktionen <strong>createPost()</strong>. Husk på, at createPost-funktionen har "brug server"-direktivet, som erklærer, at alt i det funktion skal køre på serveren.</p> <p>Al koden kører på serveren, og din klient ved intet om det. Dette skyldes, at formularen er en serverkomponent, og der ikke er noget, der bliver dynamisk gengivet på klient.</p> <p>Når du klikker på knappen <strong>Gem</strong>, kalder Next.js <strong>createPost()</strong> fungere. Dette sender titlen og brødteksten som formulardata, som sendes til den lokale API for at gemme oplysningerne.</p> <h2 id="revalidating-the-post"> Genvalidering af indlægget </h2> <p>Nederst i funktionen <strong>createPost()</strong> er følgende kodelinje:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /kode> </code></pre> <p>For at forstå, hvad denne funktion gør, skal du forestille dig, at du har en indlægsside. Inde i posts-komponenten vil du kalde en funktion ved navn <strong>getPosts()</strong> for at hente alle indlæg fra din database og gengive dem, så brugeren kan se dem:</p> <pre> <code><span>eksport</span> <span>standard</span> <span>async</span> <span><span>funktion</span> <span>Indlæg</span>() span>{<br> <span>const</span> indlæg = <span>afventer</span> getPosts()</span></code><p><code> <span>retur</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>Funktionen <strong>getPosts()</strong> ville se sådan ud:</p> <pre> <code><span>async</span> <span><span>funktion</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>wait</span> hente(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> næste: {<span>tags</span>: [<span>"indlæg"</span>], <span>genvalider</span>: <span>3600</span> <br> })</code><p><code> <span>retur</span> res.json()<br>}<br></code> </p></pre> <p>Denne funktion sender muligheden <strong>næste</strong> for at hente, så du kan indstille en genvalideringsperiode. Som standard cachelagres hver eneste hentningsanmodning, du foretager inde i serverkomponenten, for evigt. At holde styr på cachen og opdatere den, når det er nødvendigt, er en vigtig del af <span>datahentning Next.js</span>.</p> <p>Ovenstående kode fortæller Next.js at cache <strong>indlæg</strong> dataene i op til en time (3.600 sekunder). Efter en time bliver dataene forældede, og Next.js opdaterer dem for at få de seneste data fra databasen.</p> <p>Husk at funktionen <strong>createPost()</strong> kalder <strong>revalidateTag("posts")</strong>, når den har afsluttet resten af ​​sit arbejde. Dette tvinger Next.js til at genhente de data, som skal omfatte det nye indlæg, som appen lige har oprettet.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Bevis på, at din kode kører på serveren </h2> <p>For at være sikker på, at al koden kører på serveren, kan du tilføje følgende konsollogsætning inde i <strong>createPost()</strong> funktion:</p> <pre> <code><span>console</span>.log(<span>"Kører på serveren"</span>)</code> </pre> <p>Prøv derefter at oprette et nyt indlæg ved at klikke på indsend-knappen. Hvis din kode kører på serveren, vil den logmeddelelse dukke op på din terminal. Men hvis det kører på klienten, vil loggen dukke op i browserkonsollen.</p> <p>Dette gør det sikkert at sætte sensitiv information som miljøvariabler, databaseforbindelser og adgangskoder på serveren uden frygt for, at den bliver udsat for klient. Du kan derefter <span>læse strengene fra din .env-fil</span> i din Next.js-app.</p> <p>Du kan evt. ønsker at reservere brug af serverhandlinger til versioner af Next.js senere end 13.4, især i produktion. Men det er stadig rigtig spændende at se, hvor denne funktion går hen, da den konstant presser på, hvad du kan gøre ved at flytte flere og flere ting til serveren. Det skulle gøre dine klientapps nemmere at skrive, og processen med at udvikle dem meget sjovere.</p> <h2 id="learn-more-about-migrating-to-next-js"> Få mere at vide om migrering til næste .js </h2> <p>Mange frontend-udviklere bruger React til UI-udvikling. Men takket være funktioner som server-side-rendering og statisk webstedsgenerering migrerer mange af disse udviklere deres apps for at bruge Next.js. Denne migrering er meget ligetil, da React er ret lig Next.js syntaksmæssigt.</p> <p>Den ekstra ydeevne og sikkerhedsforøgelse nødvendiggør migreringen endnu mere. Muligheden for at have komponenter på serversiden, kombineret med de nye serverhandlinger, vi lige har dækket, gør Next.js til en mere sikker og mere effektiv mulighed sammenlignet med almindelig React. Som React-udvikler bør du lære, hvordan du migrerer din app til Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>