Kako koristiti radnje poslužitelja Next.js

Izdanje Next.js 13.4 došlo je sa stabilnim usmjerivačem aplikacija i mogućnošću mutacije podataka s radnjama poslužitelja. Ova je značajka apsolutna promjena u igri jer vam omogućuje izvođenje mutacija podataka u potpunosti iz komponenti poslužitelja. To donosi mnoštvo prednosti u područjima kao što su brzina, sigurnost i ukupna izvedba aplikacije.

Naučite što su radnje poslužitelja i kako koristiti ovu novu značajku u svojoj aplikaciji Next.js.

Što su radnje poslužitelja?

Akcije poslužitelja omogućuju vam pisanje jednokratnih funkcija na strani poslužitelja uz vaše komponente poslužitelja. Ovo je ogromno jer više ne morate pisati API rute prilikom slanja obrazaca ili obavljanja bilo koje druge vrste mutacije podataka, uključujući GraphQL mutacije podataka.

Možete imati funkcije koje se izvode na vašem poslužitelju, a zatim ih možete pozvati s komponenti klijenta ili poslužitelja. Ovo je alfa značajka u Next.js 13.4 i izgrađena je na temelju React Actions. Korištenje radnji poslužitelja dovodi do smanjenog JavaScripta na strani klijenta i može vam pomoći u stvaranju postupno poboljšanih obrazaca.

Primjer radnji poslužitelja

Radnjama poslužitelja možete izvršiti mutacije unutar Next.js, na poslužitelju. Pogledajte ovu novu značajku s primjerom Next.js stranice koja prikazuje obrazac koji vam omogućuje stvaranje objave.

Evo uvoza:

uvoz Veza iz"sljedeća/link"
uvoz FormGroup iz"@/components/FormGroup"
uvoz {revalidateTag} iz"sljedeća/predmemorija"
uvoz { preusmjeravanje } iz"sljedeća/navigacija"

Sada dolazi kod za izradu objave. Ova je funkcija radnja poslužitelja; pokreće se na poslužitelju i šalje naslov i tijelo objave API-ju (koji stvara objavu u bazi podataka):

asinkronifunkcijacreatePost(podaci) {
"koristi poslužitelj"
konst naslov = podaci.get("titula")
konst tijelo = data.get("tijelo")
čekati dohvati (" http://127.0.0.1/posts", {
 Zaglavlje: {"Vrsta sadržaja": "aplikacija/json"},
 metoda: POST,
 tijelo: JSON.stringify({naslov, tijelo})
 })
 revalidateTag("postovi")
 preusmjeriti ("/")
}

Ova funkcija dobiva naslov i tijelo posta koje zatim šalje na /posts krajnju točku putem POST zahtjeva. Zatim prisiljava predmemoriju da osvježi sadržaj povezan s oznakom "posts" i preusmjerava natrag na početnu stranicu.

Evo obrasca za prikupljanje naslova i tijela novog posta:

izvozzadano NewPostForm() {
povratak (





"titula">Naslov</label>
"tekst" ime="titula" id="titula" />
 </FormGroup>
 </div>




"titula">Tijelo</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/Grupa obrazaca></span><br> <<span>/div></span><p><code> <div>
<br> <button> Spremi <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Možete vidjeti da obrazac ne sadrži logiku koja se odnosi na stvaranje objave, samo radnju obrasca: funkciju <strong>createPost()</strong>. Podsjetimo se da funkcija createPost ima direktivu "use server" koja izjavljuje da sve u tom funkcija bi se trebala izvoditi na poslužitelju.</p> <p>Sav se kod izvodi na poslužitelju, a vaš klijent ne zna ništa o tome. To je zato što je obrazac komponenta poslužitelja i ne postoji ništa što se dinamički prikazuje na klijent.</p> <p>Kada kliknete gumb <strong>Spremi</strong>, Next.js poziva <strong>createPost()</strong> funkcija. Ovo šalje naslov i tijelo kao podatke obrasca, koji se objavljuju lokalnom API-ju za spremanje informacija.</p> <h2 id="revalidating-the-post"> Ponovno provjeravanje objave </h2> <p>Na dnu funkcije <strong>createPost()</strong> nalazi se sljedeći redak koda:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>Da biste razumjeli što ta funkcija radi, zamislite da imate stranicu s objavama. Unutar komponente postova pozvali biste funkciju pod nazivom <strong>getPosts()</strong> da dobijete sve postove iz svoje baze podataka i prikažete ih korisniku da ih vidi:</p> <pre> <code><span>izvoz</span> <span>zadano</span> <span>asinkronizirano</span> <span><span>funkcija</span> <span>Postovi</span>() span>{<br> <span>const</span> postovi = <span>čekaju</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> izgledala bi ovako:</p> <pre> <code><span>async</span> <span><span>funkcija</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>čekaj</span> dohvati(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> dalje: {<span>oznake</span>: [<span>"posts"</span>], <span>ponovno potvrdi</span>: <span>3600</span> }<br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Ova funkcija prosljeđuje opciju <strong>sljedeće</strong> za dohvaćanje, što vam omogućuje postavljanje razdoblja ponovne provjere. Prema zadanim postavkama, svaki pojedini zahtjev za dohvaćanje koji napravite unutar komponente poslužitelja zauvijek se predmemorira. Praćenje predmemorije i njezino osvježavanje po potrebi važan je dio <span>dohvaćanja podataka u Next.js</span>.</p> <p>Gornji kod govori Next.js da predmemorira podatke o <strong>objavama</strong> do jednog sata (3600 sekundi). Nakon sat vremena podaci postaju ustajali i Next.js ih osvježava kako bi dobio najnovije podatke iz baze podataka.</p> <p>Zapamtite to funkcija <strong>createPost()</strong> poziva <strong>revalidateTag("posts")</strong> nakon što dovrši ostatak posla. Ovo prisiljava Next.js da ponovno dohvati te podatke koji bi trebali uključivati ​​novi post koji je aplikacija upravo izradila.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Dokaz da se vaš kod izvodi na poslužitelju </h2> <p>Kako biste bili sigurni da se sav kôd izvodi na poslužitelju, možete dodati sljedeću izjavu dnevnika konzole unutar <strong>createPost()</strong> funkcija:</p> <pre> <code><span>console</span>.log(<span>"Radi se na poslužitelju"</span>)</code> </pre> <p>Zatim pokušajte stvoriti novi post klikom na gumb za slanje. Ako se vaš kôd izvodi na poslužitelju, ta će se poruka dnevnika pojaviti na vašem terminalu. Ali ako se izvodi na klijentu, zapisnik će se pojaviti u konzoli preglednika.</p> <p>To čini sigurnim stavljanje osjetljivih informacije kao što su varijable okoline, veze s bazom podataka i lozinke na poslužitelju bez straha da će biti izložene klijent. Zatim možete <span>čitati nizove iz vaše .env datoteke</span> u svojoj aplikaciji Next.js.</p> <p>Možete želite rezervirati korištenje radnji poslužitelja za verzije Next.js kasnije od 13.4, posebno u proizvodnja. Ali svejedno je jako uzbudljivo vidjeti kamo ova značajka ide budući da neprestano gura ono što možete učiniti premještanjem sve više i više stvari na poslužitelj. Trebao bi učiniti vaše klijentske aplikacije lakšim za pisanje, a proces razvoja istih mnogo ugodnijim.</p> <h2 id="learn-more-about-migrating-to-next-js"> Saznajte više o prelasku na Next .js </h2> <p>Mnogi front-end programeri koriste React za razvoj korisničkog sučelja. Ali zahvaljujući značajkama kao što su iscrtavanje na strani poslužitelja i generiranje statičkih stranica, mnogi od tih programera migriraju svoje aplikacije na korištenje Next.js. Ova migracija je vrlo jednostavna budući da je React poprilično sličan Next.js sintaksi.</p> <p>Dodatna izvedba i povećanje sigurnosti još više zahtijevaju migraciju. Mogućnost posjedovanja komponenti na strani poslužitelja, zajedno s novim radnjama poslužitelja koje smo upravo pokrili, čini Next.js sigurnijom i učinkovitijom opcijom u usporedbi s običnim Reactom. Kao React programer, trebali biste naučiti kako migrirati svoju aplikaciju na Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>