Kaip naudoti „Next.js“ serverio veiksmus

13.4 „Next.js“ leidimas buvo su stabiliu programos maršruto parinktuvu ir galimybe atlikti duomenų mutaciją naudojant serverio veiksmus. Ši funkcija yra absoliutus žaidimo keitiklis, nes leidžia atlikti duomenų mutacijas tik iš serverio komponentų. Tai suteikia daug naudos tokiose srityse kaip greitis, saugumas ir bendras programos veikimas.

Sužinokite, kas yra serverio veiksmai ir kaip naudoti šią naują funkciją Next.js programoje.

Kas yra serverio veiksmai?

Serverio veiksmai leidžia įrašyti vienkartines serverio funkcijas kartu su serverio komponentais. Tai labai svarbu, nes jums nebereikia rašyti API maršrutų, kai pateikiate formas ar atliekate bet kokią kitą duomenų mutaciją, įskaitant GraphQL duomenų mutacijos.

Galite turėti funkcijas, kurios veikia jūsų serveryje, ir galite jas iškviesti iš kliento arba serverio komponentų. Tai yra „Next.js 13.4“ alfa funkcija ir ji sukurta remiantis „React Actions“. Naudojant serverio veiksmus sumažėja kliento pusės „JavaScript“ ir gali padėti sukurti palaipsniui patobulintas formas.

Serverio veiksmų pavyzdys

Naudodami serverio veiksmus galite atlikti mutacijas serveryje esančioje Next.js viduje. Pažvelkite į šią naują funkciją su Next.js puslapio pavyzdžiu, kuriame pateikiama forma, leidžianti sukurti įrašą.

Štai importas:

importuoti Nuoroda iš"kitas/nuoroda"
importuoti FormGroup iš"@/components/FormGroup"
importuoti { revalidateTag } iš"kitas / talpykla"
importuoti { peradresuoti } iš"Kitas/navigacija"

Dabar įrašo kūrimo kodas. Ši funkcija yra serverio veiksmas; jis veikia serveryje ir siunčia įrašo pavadinimą bei turinį į API (kuri sukuria įrašą duomenų bazėje):

asyncfunkcijaCreatePost(duomenis) {
"naudoti serverį"
konst title = data.get("titulas")
konst body = data.get("kūnas")
laukti atnešti (" http://127.0.0.1/posts", {
 antraštė: {"Turinio tipas": "application/json"},
 metodas: POST,
 kūnas: JSON.stringify({title, body})
 })
 revalidateTag("postai")
 redirect ("/")
}

Ši funkcija gauna įrašo pavadinimą ir turinį, kurį siunčia į /posts galinį tašką per POST užklausą. Tada ji priverčia talpyklą atnaujinti turinį, susietą su „posts“ žyma, ir nukreipia atgal į pagrindinį puslapį.

Štai forma, skirta naujam įrašo pavadinimui ir turiniui rinkti:

eksportuotinumatytas NewPostForm() {
grąžinti (





"titulas">Pavadinimas</label>
"tekstas" vardas ="titulas" id="titulas" />
 </FormGroup>
 </div>




"titulas">Kūnas</label>
"tekstas" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>teksto sritis</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Išsaugoti <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Matysite, kad formoje nėra su įrašo kūrimu susijusios logikos, tik formos veiksmas: funkcija <strong>createPost()</strong>. Prisiminkite, kad funkcija createPost turi direktyvą „naudoti serverį“, kuri skelbia, kad viskas tame funkcija turėtų veikti serveryje.</p> <p>Visas kodas veikia serveryje, o jūsų klientas nieko nežino apie tai. Taip yra todėl, kad forma yra serverio komponentas ir nėra nieko, kas dinamiškai atvaizduojama klientas.</p> <p>Kai spustelite mygtuką <strong>Išsaugoti</strong>, Next.js iškviečia <strong>createPost()</strong> funkcija. Tai siunčia pavadinimą ir turinį kaip formos duomenis, kurie paskelbiami vietinėje API, kad būtų išsaugota informacija.</p> <h2 id="revalidating-the-post"> Įrašo patvirtinimas iš naujo </h2> <p>Funkcijos <strong>createPost()</strong> apačioje yra ši kodo eilutė:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /kodas> </code></pre> <p>Norėdami suprasti, ką ši funkcija atlieka, įsivaizduokite, kad turite įrašų puslapį. Įrašų komponente turėtumėte iškviesti funkciją, pavadintą <strong>getPosts()</strong>, kad gautumėte visus įrašus iš duomenų bazės ir pateiktumėte juos naudotojui:</p> <pre> <code><span>eksportuoti</span> <span>numatytasis</span> <span>asinchronizavimas</span> <span><span>funkcija</span> <span>Įrašai</span>() span>{<br> <span>const</span> įrašai = <span>laukti</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>Funkcija <strong>getPosts()</strong> atrodytų taip:</p> <pre> <code><span>async</span> <span><span>funkcija</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>laukti</span> gauti(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> Kitas: {<span>žymos</span>: [<span>"įrašai"</span>], <span>patvirtinti</span>: <span>3600</span> <br> })</code><p><code> <span>grąžinti</span> res.json()<br>}<br></code> </p></pre> <p>Ši funkcija perduoda parinktį <strong>Kitas</strong>, kad būtų galima gauti, todėl galite nustatyti pakartotinio patvirtinimo laikotarpį. Pagal numatytuosius nustatymus kiekviena iškvietimo užklausa, kurią pateikiate serverio komponente, yra visam laikui saugoma talpykloje. Talpyklos stebėjimas ir jos atnaujinimas, kai reikia, yra svarbi <span>duomenų gavimo dalis Next.js</span>.</p> <p>Aukščiau pateiktas kodas nurodo Next.js talpykloje saugoti <strong>įrašų</strong> duomenis iki vienos valandos (3600 sekundžių). Po valandos duomenys pasensta, o Next.js juos atnaujina, kad gautų naujausius duomenis iš duomenų bazės.</p> <p>Atminkite, kad funkcija <strong>createPost()</strong> iškviečia <strong>revalidateTag("posts")</strong>, kai baigia likusį darbą. Tai verčia Next.js iš naujo gauti tuos duomenis, į kuriuos turėtų būti įtrauktas naujas įrašas, kurį ką tik sukūrė programa.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Įrodymas, kad jūsų kodas veikia serveryje </h2> <p>Kad būtumėte tikri, kad visas kodas veikia serveryje, galite įtraukti šį konsolės žurnalo teiginį Funkcija <strong>createPost()</strong>:</p> <pre> <code><span>konsole</span>.log(<span>"Vykdoma serveryje"</span>)</code> </pre> <p>Tada pabandykite sukurti naują įrašą spustelėdami pateikimo mygtuką. Jei jūsų kodas veikia serveryje, tas žurnalo pranešimas bus rodomas jūsų terminale. Bet jei jis veikia kliente, žurnalas bus rodomas naršyklės konsolėje.</p> <p>Tai leidžia saugiai įdėti neskelbtiną informaciją informacija, pvz., aplinkos kintamieji, duomenų bazių jungtys ir slaptažodžiai serveryje, nebijant, kad ji bus paveikta klientas. Tada galite <span>skaityti eilutes iš .env failo</span> programoje Next.js.</p> <p>Galite norite rezervuoti serverio veiksmų naudojimą naujesnėms nei 13.4 versijoms Next.js, ypač gamyba. Tačiau vis tiek labai įdomu pamatyti, kur ši funkcija vystosi, nes ji nuolat skatina tai, ką galite padaryti perkeldami vis daugiau dalykų į serverį. Tai turėtų palengvinti klientų programų rašymą, o jų kūrimo procesą – daug malonesnį.</p> <h2 id="learn-more-about-migrating-to-next-js"> Sužinokite daugiau apie perkėlimą į kitą .js </h2> <p>Daugelis sąsajos kūrėjų naudoja React kurdami vartotojo sąsają. Tačiau dėl tokių funkcijų kaip serverio atvaizdavimas ir statinės svetainės generavimas, daugelis šių kūrėjų perkelia savo programas, kad naudotų Next.js. Šis perkėlimas yra labai paprastas, nes „React“ yra gana panašus į „Next.js“ sintaksę.</p> <p>Dėl papildomo našumo ir saugumo padidinimo reikia dar labiau perkelti. Galimybė turėti serverio komponentus kartu su naujais serverio veiksmais, kuriuos ką tik aptarėme, daro Next.js saugesnę ir našesnę, palyginti su paprastu React. Kaip „React“ kūrėjas turėtumėte sužinoti, kaip perkelti programą į Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>