Kako uporabljati dejanja strežnika Next.js

Izdaja Next.js 13.4 je prišla s stabilnim usmerjevalnikom aplikacij in možnostjo mutacije podatkov z dejanji strežnika. Ta funkcija je absolutna sprememba igre, saj vam omogoča izvajanje mutacij podatkov v celoti iz komponent strežnika. To prinaša številne prednosti na področjih, kot so hitrost, varnost in splošna zmogljivost aplikacije.

Naučite se, kaj so dejanja strežnika in kako uporabljati to novo funkcijo v aplikaciji Next.js.

Kaj so dejanja strežnika?

Strežniška dejanja vam omogočajo pisanje enkratnih strežniških funkcij tik ob strežniških komponentah. To je ogromno, ker vam ni več treba pisati poti API-ja, ko pošiljate obrazce ali izvajate katero koli drugo vrsto mutacije podatkov, vključno z Mutacije podatkov GraphQL.

Imate lahko funkcije, ki se izvajajo na vašem strežniku, nato pa jih lahko pokličete iz komponent odjemalca ali strežnika. To je alfa funkcija v Next.js 13.4 in je zgrajena na podlagi React Actions. Uporaba strežniških dejanj zmanjša JavaScript na strani odjemalca in vam lahko pomaga pri ustvarjanju postopno izboljšanih obrazcev.

Primer dejanj strežnika

Z dejanji strežnika lahko izvedete mutacije znotraj Next.js na strežniku. Oglejte si to novo funkcijo s primerom strani Next.js, ki upodobi obrazec, ki vam omogoča ustvarjanje objave.

Tukaj je uvoz:

uvoz Povezava od"naprej/povezava"
uvoz FormGroup od"@/components/FormGroup"
uvoz {revalidateTag} od"naprej/predpomnilnik"
uvoz { preusmeritev } od"naprej/navigacija"

Zdaj pa kodo za ustvarjanje objave. Ta funkcija je dejanje strežnika; deluje na strežniku in pošlje naslov in telo objave API-ju (ki ustvari objavo v bazi podatkov):

asinhfunkcijocreatePost(podatke) {
"uporabi strežnik"
konst title = data.get("naslov")
konst body = data.get("telo")
čakati prinesi (" http://127.0.0.1/posts", {
 glava: {"Vrsta vsebine": "aplikacija/json"},
 metoda: POST,
 telo: JSON.stringify({naslov, telo})
 })
 revalidateTag("objave")
 preusmeritev("/")
}

Ta funkcija pridobi naslov in telo objave, ki ju nato pošlje v /posts končno točko prek zahteve POST. Nato prisili predpomnilnik, da osveži vsebino, povezano z oznako »objave«, in preusmeri nazaj na domačo stran.

Tukaj je obrazec za zbiranje naslova in telesa nove objave:

izvozprivzeto NewPostForm() {
vrnitev (





"naslov">Naslov</label>
"besedilo" ime="naslov" id="naslov" />
 </FormGroup>
 </div>




"naslov">Telo</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> Shrani <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Vidite lahko, da obrazec ne vsebuje nobene logike v zvezi z ustvarjanjem objave, le dejanje obrazca: funkcija <strong>createPost()</strong>. Spomnimo se, da ima funkcija createPost direktivo "use server", ki izjavi, da je vse v tem funkcija bi se morala izvajati na strežniku.</p> <p>Vsa koda se izvaja na strežniku in vaš odjemalec ne ve ničesar o tem. To je zato, ker je obrazec strežniška komponenta in ni ničesar, kar bi se dinamično upodabljalo na odjemalec.</p> <p>Ko kliknete gumb <strong>Shrani</strong>, Next.js pokliče <strong>createPost()</strong> funkcijo. To pošlje naslov in telo kot podatke obrazca, ki se objavijo v lokalni API za shranjevanje informacij.</p> <h2 id="revalidating-the-post"> Ponovno preverjanje objave </h2> <p>Na dnu funkcije <strong>createPost()</strong> je naslednja vrstica kode:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>Če želite razumeti, kaj ta funkcija počne, si predstavljajte, da imate stran z objavami. Znotraj komponente objav bi poklicali funkcijo z imenom <strong>getPosts()</strong>, da pridobite vse objave iz svoje baze podatkov in jih upodabljate, da jih vidi uporabnik:</p> <pre> <code><span>izvozi</span> <span>privzeto</span> <span>asinhrono</span> <span><span>funkcija</span> <span>Objave</span>() span>{<br> <span>const</span> objave = <span>čakajo</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> bi izgledala takole:</p> <pre> <code><span>async</span> <span><span>funkcija</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>čakaj</span> prinesi(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> naprej: {<span>oznake</span>: [<span>"objave"</span>], <span>ponovno potrdi</span>: <span>3600</span> }<br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Ta funkcija posreduje možnost <strong>naslednji</strong> pri pridobivanju, kar vam omogoča nastavitev obdobja ponovnega preverjanja. Privzeto je vsaka posamezna zahteva za pridobivanje, ki jo naredite znotraj strežniške komponente, za vedno predpomnjena. Spremljanje predpomnilnika in njegovo osveževanje po potrebi je pomemben del <span>pridobivanja podatkov v Next.js</span>.</p> <p>Zgornja koda pove Next.js, naj predpomni podatke o <strong>objavah</strong> do ene ure (3600 sekund). Po eni uri podatki postanejo zastareli in Next.js jih osveži, da pridobi najnovejše podatke iz baze podatkov.</p> <p>Ne pozabite, da funkcija <strong>createPost()</strong> pokliče <strong>revalidateTag("posts")</strong>, ko konča preostanek svojega dela. To prisili Next.js, da ponovno pridobi te podatke, ki bi morali vključevati novo objavo, ki jo je aplikacija pravkar ustvarila.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Dokaz, da se vaša koda izvaja na strežniku </h2> <p>Če želite biti prepričani, da se vsa koda izvaja na strežniku, lahko dodate naslednji stavek dnevnika konzole znotraj <strong>createPost()</strong> funkcija:</p> <pre> <code><span>console</span>.log(<span>"Izvaja se na strežniku"</span>)</code> </pre> <p>Nato poskusite ustvariti novo objavo s klikom na gumb za pošiljanje. Če se vaša koda izvaja na strežniku, bo to sporočilo dnevnika prikazano na vašem terminalu. Če pa se izvaja v odjemalcu, se bo dnevnik prikazal v konzoli brskalnika.</p> <p>Zaradi tega je varno postaviti občutljive informacije, kot so okoljske spremenljivke, povezave z bazo podatkov in gesla na strežniku, ne da bi se bali, da bodo izpostavljeni stranka. Nato lahko <span>preberete nize iz datoteke .env</span> v aplikaciji Next.js.</p> <p>Lahko želite rezervirati uporabo strežniških dejanj za različice Next.js, novejše od 13.4, zlasti v proizvodnja. Še vedno pa je zelo vznemirljivo videti, kam gre ta funkcija, saj nenehno spodbuja, kaj lahko naredite s premikanjem čedalje več stvari na strežnik. To bi moralo olajšati pisanje vaših odjemalskih aplikacij, proces njihovega razvijanja pa veliko bolj prijeten.</p> <h2 id="learn-more-about-migrating-to-next-js"> Več o prehodu na Next .js </h2> <p>Številni front-end razvijalci uporabljajo React za razvoj uporabniškega vmesnika. Toda zahvaljujoč funkcijam, kot sta upodabljanje na strežniški strani in ustvarjanje statičnega spletnega mesta, veliko teh razvijalcev seli svoje aplikacije na uporabo Next.js. Ta selitev je zelo enostavna, saj je React kar zadeva sintakso precej podoben Next.js.</p> <p>Dodatno povečanje zmogljivosti in varnosti še bolj zahtevata selitev. Možnost komponent na strani strežnika, skupaj z novimi dejanji strežnika, ki smo jih pravkar obravnavali, naredi Next.js bolj varno in zmogljivejšo možnost v primerjavi z navadnim Reactom. Kot razvijalec React bi se morali naučiti, kako svojo aplikacijo preseliti na Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>