Kuidas kasutada Next.js serveri toiminguid

Next.js-i versiooniga 13.4 oli stabiilne rakenduse ruuter ja võimalus teha serveritoimingutega andmete mutatsioone. See funktsioon on absoluutne mängumuutja, kuna see võimaldab teil teha andmemutatsioone täielikult serverikomponentidest. See toob kaasa hulga eeliseid sellistes valdkondades nagu kiirus, turvalisus ja rakenduse üldine jõudlus.

Siit saate teada, mis on serveritoimingud ja kuidas seda uut funktsiooni rakenduses Next.js kasutada.

Mis on serveritoimingud?

Serveritoimingud võimaldavad teil kirjutada ühekordseid serveripoolseid funktsioone otse serverikomponentide kõrvale. See on tohutu, sest te ei pea enam API marsruute kirjutama vormide esitamisel või mis tahes muul andmemutatsioonil, sealhulgas GraphQL andmete mutatsioonid.

Teil võib olla funktsioone, mis töötavad teie serveris ja seejärel saate neile helistada kliendi või serveri komponentidest. See on rakenduse Next.js 13.4 alfa funktsioon ja see on üles ehitatud React Actionsile. Serveritoimingute kasutamine vähendab kliendipoolset JavaScripti ja võib aidata teil luua järk-järgult täiustatud vorme.

Serveri toimingute näide

Serveritoimingutega saate teha serveris Next.js-s mutatsioone. Vaadake seda uut funktsiooni koos Next.js-lehe näitega, mis renderdab vormi, mis võimaldab teil postitust luua.

Siin on imporditud tooted:

importida Link alates"järgmine/link"
importida FormGroup alates"@/components/FormGroup"
importida { revalidateTag } alates"järgmine/vahemälu"
importida { suunata } alates"järgmine/navigeerimine"

Nüüd postituse loomise kood. See funktsioon on serveritoiming; see töötab serveris ja saadab postituse pealkirja ja keha API-le (mis loob postituse andmebaasi):

asünkrfunktsioonilooPosti(andmeid) {
"kasuta serverit"
konst title = data.get("tiitel")
konst body = data.get("keha")
ootama tõmba(" http://127.0.0.1/posts", {
 päis: {"Sisu tüüp": "rakendus/json"},
 meetod: POST,
 keha: JSON.stringify({title, body})
 })
 revalidateTag("postitused")
 redirect("/")
}

See funktsioon saab postituse pealkirja ja keha, mille see seejärel saadab /posts lõpp-punkt POST-päringu kaudu. Seejärel sunnib see vahemälu värskendama märgendiga "postitused" seotud sisu ja suunab tagasi avalehele.

Siin on vorm uue postituse pealkirja ja sisu kogumiseks:

eksportidavaikimisi NewPostForm() {
tagasi (





"tiitel">Pealkiri</label>
"tekst" nimi ="tiitel" id="tiitel" />
 </FormGroup>
 </div>




"tiitel">Keha</label>
"tekst" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>tekstiala</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Salvesta <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Näete, et vorm ei sisalda postituse loomisega seotud loogikat, vaid vormitoimingut: funktsioon <strong>createPost()</strong>. Tuletage meelde, et funktsioonil createPost on käsk "kasuta serverit", mis deklareerib, et kõik selles funktsioon peaks serveris töötama.</p> <p>Kogu kood töötab serveris ja teie klient ei tea midagi sellest. Selle põhjuseks on asjaolu, et vorm on serverikomponent ja selles ei renderdata midagi dünaamiliselt klient.</p> <p>Kui klõpsate nupul <strong>Salvesta</strong>, kutsub Next.js funktsiooni <strong>createPost()</strong> funktsiooni. See saadab pealkirja ja keha vormiandmetena, mis postitatakse teabe salvestamiseks kohalikku API-sse.</p> <h2 id="revalidating-the-post"> Postituse uuesti kinnitamine </h2> <p>Funktsiooni <strong>createPost()</strong> allosas on järgmine koodirida:</p> <pre> <code>revalidateTags(<span>"postitused"</span>)< /code> </code></pre> <p>Et mõista, mida see funktsioon teeb, kujutage ette, et teil on postituste leht. Postituste komponendis peaksite kutsuma funktsiooni nimega <strong>getPosts()</strong>, et hankida kõik postitused teie andmebaasist ja renderdada need kasutajale vaatamiseks:</p> <pre> <code><span>ekspordi</span> <span>vaikeseade</span> <span>asünkroonimine</span> <span><span>funktsioon</span> <span>Postitused</span>() span>{<br> <span>const</span> postitust = <span>ootma</span> getPosts()</span></code><p><code> <span>tagasi</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>Funktsioon <strong>getPosts()</strong> näeks välja selline:</p> <pre> <code><span>async</span> <span><span>funktsioon</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>ootma</span> tõmba(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> järgmine: {<span>sildid</span>: [<span>"postitused"</span>], <span>revalidate</span>: <span>3600</span> <br> })</code><p><code> <span>tagasi</span> res.json()<br>}<br></code> </p></pre> <p>See funktsioon edastab toomisele valiku <strong>järgmine</strong>, mis võimaldab teil määrata kordusvalideerimisperioodi. Vaikimisi salvestatakse iga serverikomponendi sees tehtud laadimistaotlus igaveseks vahemällu. Vahemälu jälgimine ja selle vajaduse korral värskendamine on <span>andmete toomise oluline osa Next.js</span>.</p> <p>Ülaltoodud kood käsib Next.js-il hoida vahemällu <strong>postituste</strong> andmeid kuni üheks tunniks (3600 sekundit). Tunni aja pärast muutuvad andmed aegunud ja Next.js värskendab neid, et saada andmebaasist uusimad andmed.</p> <p>Pidage meeles, et funktsioon <strong>createPost()</strong> kutsub pärast ülejäänud töö lõpetamist funktsiooni <strong>revalidateTag("posts")</strong>. See sunnib Next.js-i uuesti tooma need andmed, mis peaksid sisaldama rakenduse äsja loodud uut postitust.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Tõend, et teie kood töötab serveris </h2> <p>Veendmaks, et kogu kood serveris töötab, saate lisada järgmise konsooli logilause Funktsioon <strong>createPost()</strong>:</p> <pre> <code><span>konsool</span>.log(<span>"Töötab serveris"</span>)</code> </pre> <p>Seejärel proovige luua uus postitus, klõpsates esitamisnupul. Kui teie kood töötab serveris, kuvatakse see logiteade teie terminalis. Kuid kui see töötab kliendis, kuvatakse logi brauseri konsoolis.</p> <p>See muudab tundliku muutmise turvaliseks teavet, nagu keskkonnamuutujad, andmebaasiühendused ja paroolid serveris, kartmata, et see puutub kokku klient. Seejärel saate rakenduses Next.js <span>lugeda stringe oma .env-failist</span>.</p> <p>Võite soovite reserveerida serveritoimingute kasutamise Next.js-i versioonide jaoks, mis on hilisemad kui 13.4, eriti kui tootmine. Kuid ikkagi on väga põnev näha, kuhu see funktsioon areneb, kuna see surub pidevalt edasi seda, mida saate teha, kolides üha rohkem asju serverisse. See peaks muutma teie kliendirakenduste kirjutamise lihtsamaks ja nende arendamise protsessi palju nauditavamaks.</p> <h2 id="learn-more-about-migrating-to-next-js"> Lisateave järgmisesse üleviimise kohta .js </h2> <p>Paljud esiotsa arendajad kasutavad kasutajaliidese arendamiseks Reacti. Kuid tänu sellistele funktsioonidele nagu serveripoolne renderdamine ja saidi staatiline genereerimine viivad paljud neist arendajatest oma rakendused üle Next.js-i kasutama. See üleviimine on väga lihtne, kuna React on süntaksi poolest üsna sarnane failiga Next.js.</p> <p>Täiendav jõudluse ja turvalisuse suurendamine nõuavad migreerimist veelgi. Võimalus omada serveripoolseid komponente koos uute serveritoimingutega, mida just käsitlesime, muudab Next.js'i turvalisemaks ja tõhusamaks valikuks võrreldes tavalise Reactiga. Reacti arendajana peaksite õppima, kuidas oma rakendust Next.js-i üle viia.</p> </div></code></p></pre></button>
</div></code></p></span>