Ako používať akcie servera Next.js

Vydanie Next.js 13.4 prišlo so stabilným smerovačom aplikácií a schopnosťou meniť údaje pomocou akcií servera. Táto funkcia je absolútnou zmenou hry, pretože vám umožňuje vykonávať mutácie údajov výlučne zo serverových komponentov. To prináša množstvo výhod v oblastiach, ako je rýchlosť, bezpečnosť a celkový výkon aplikácie.

Zistite, čo sú akcie servera a ako používať túto novú funkciu vo svojej aplikácii Next.js.

Čo sú akcie servera?

Akcie servera vám umožňujú písať jednorazové funkcie na strane servera priamo popri komponentoch servera. Je to obrovské, pretože už nemusíte písať trasy API pri odosielaní formulárov alebo vykonávaní akéhokoľvek iného druhu mutácie údajov, vrátane Mutácie údajov GraphQL.

Môžete mať funkcie, ktoré bežia na vašom serveri a potom ich môžete volať z klientskych alebo serverových komponentov. Toto je funkcia alfa v Next.js 13.4 a je postavená na React Actions. Používanie akcií servera vedie k obmedzeniu JavaScriptu na strane klienta a môže vám pomôcť vytvárať postupne vylepšené formuláre.

Príklad akcií servera

Pomocou akcií servera môžete vykonávať mutácie v súbore Next.js na serveri. Pozrite sa na túto novú funkciu s ukážkou stránky Next.js, ktorá vykresľuje formulár umožňujúci vytvoriť príspevok.

Tu sú dovozy:

importovať Odkaz od"ďalší/odkaz"
importovať FormGroup od"@/components/FormGroup"
importovať { revalidateTag } od"ďalší/vyrovnávacia pamäť"
importovať { presmerovať } od"ďalší/navigácia"

Teraz kód na vytvorenie príspevku. Táto funkcia je akciou servera; beží na serveri a odosiela názov príspevku a telo do API (ktoré vytvorí príspevok v databáze):

asyncfunkciucreatePost(údajov) {
"použiť server"
konšt title = data.get("titul")
konšt body = data.get("telo")
čakať priniesť (" http://127.0.0.1/posts", {
 hlavička: {"Druh obsahu": "application/json"},
 metóda: POST,
 telo: JSON.stringify({title, body})
 })
 revalidateTag("príspevky")
 presmerovať("/")
}

Táto funkcia získa názov príspevku a telo, ktoré potom odošle /posts koncový bod prostredníctvom požiadavky POST. Potom vynúti vyrovnávaciu pamäť, aby obnovila obsah spojený so značkou „posts“ a presmeruje späť na domovskú stránku.

Tu je formulár na získanie názvu a textu nového príspevku:

exportpredvolená NewPostForm() {
vrátiť (





"titul">Názov</label>
"text" meno="titul" id="titul" />
 </FormGroup>
 </div>




"titul">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> Uložiť <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Môžete vidieť, že formulár neobsahuje žiadnu logiku týkajúcu sa vytvorenia príspevku, iba akciu formulára: funkciu <strong>createPost()</strong>. Pripomeňme, že funkcia createPost má direktívu „use server“, ktorá deklaruje, že všetko v nej funkcia by mala bežať na serveri.</p> <p>Všetok kód beží na serveri a váš klient nič nevie o tom. Je to preto, že formulár je serverový komponent a na serveri nie je nič, čo by sa dynamicky vykresľovalo klient.</p> <p>Keď kliknete na tlačidlo <strong>Uložiť</strong>, Next.js zavolá <strong>createPost()</strong> funkciu. Toto odošle názov a telo ako údaje formulára, ktoré sa odošle do lokálneho rozhrania API, aby sa uložili informácie.</p> <h2 id="revalidating-the-post"> Opätovné overenie príspevku </h2> <p>V spodnej časti funkcie <strong>createPost()</strong> je nasledujúci riadok kódu:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>Ak chcete pochopiť, čo táto funkcia robí, predstavte si, že máte stránku s príspevkami. V rámci komponentu príspevkov by ste zavolali funkciu s názvom <strong>getPosts()</strong>, aby ste získali všetky príspevky z databázy a zobrazili ich používateľovi:</p> <pre> <code><span>exportovať</span> <span>predvolené</span> <span>async</span> <span><span>funkcia</span> <span>Príspevky</span>() span>{<br> <span>konst</span> príspevkov = <span>čakať</span> getPosts()</span></code><p><code> <span>návrat</span> (<br> <div>
<br> {posts.map(<span><span>príspevok</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>Funkcia <strong>getPosts()</strong> by vyzerala takto:</p> <pre> <code><span>async</span> <span><span>funkcia</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>čakať</span> načítať(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> ďalšie: {<span>značky</span>: [<span>"príspevky"</span>], <span>znova overiť</span>: <span>3600</span> }<br> })</code><p><code> <span>návrat</span> res.json()<br>}<br></code> </p></pre> <p>Táto funkcia prejde cez možnosť <strong>ďalšia</strong> na načítanie, čo vám umožní nastaviť obdobie opätovného overenia. V predvolenom nastavení sa každá jedna požiadavka na načítanie, ktorú vykonáte v rámci serverového komponentu, navždy uloží do vyrovnávacej pamäte. Sledovanie vyrovnávacej pamäte a jej obnovenie v prípade potreby je dôležitou súčasťou <span>načítania údajov Next.js</span>.</p> <p>Vyššie uvedený kód hovorí Next.js, aby uložila do vyrovnávacej pamäte údaje <strong>príspevkov</strong> až na jednu hodinu (3 600 sekúnd). Po hodine sa údaje stanú neaktuálnymi a Next.js ich obnoví, aby získal najnovšie údaje z databázy.</p> <p>Nezabudnite, že funkcia <strong>createPost()</strong> volá <strong>revalidateTag("posts")</strong>, keď dokončí zvyšok svojej práce. To prinúti Next.js znova načítať údaje, ktoré by mali zahŕňať nový príspevok, ktorý aplikácia práve vytvorila.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Dôkaz, že váš kód beží na serveri </h2> <p>Aby ste si boli istí, že všetok kód beží na serveri, môžete do súboru pridať nasledujúci príkaz protokolu konzoly Funkcia <strong>createPost()</strong>:</p> <pre> <code><span>konzola</span>.log(<span>"Beží na serveri"</span>)</code> </pre> <p>Potom sa pokúste vytvoriť nový príspevok kliknutím na tlačidlo Odoslať. Ak váš kód beží na serveri, táto správa protokolu sa zobrazí na vašom termináli. Ak však beží na klientovi, protokol sa zobrazí v konzole prehliadača.</p> <p>To umožňuje bezpečné vkladanie citlivých informácie, ako sú premenné prostredia, databázové pripojenia a heslá na serveri bez obáv z toho, že budú vystavené zákazník. Potom môžete <span>prečítať reťazce zo súboru .env</span> v aplikácii Next.js.</p> <p>Môžete chcete vyhradiť použitie akcií servera pre verzie Next.js novšie ako 13.4, najmä v výroby. Ale stále je naozaj vzrušujúce vidieť, kam sa táto funkcia uberá, pretože neustále tlačí na to, čo môžete urobiť presúvaním stále väčšieho množstva vecí na server. Malo by to zjednodušiť písanie vašich klientskych aplikácií a oveľa príjemnejší proces ich vývoja.</p> <h2 id="learn-more-about-migrating-to-next-js"> Ďalšie informácie o migrácii na ďalšiu .js </h2> <p>Veľa front-endových vývojárov používa React na vývoj používateľského rozhrania. Ale vďaka funkciám, ako je vykresľovanie na strane servera a generovanie statických stránok, mnohí z týchto vývojárov migrujú svoje aplikácie na Next.js. Táto migrácia je veľmi jednoduchá, pretože React je z hľadiska syntaxe dosť podobný Next.js.</p> <p>Dodatočný výkon a zvýšenie bezpečnosti si migráciu ešte viac vyžadujú. Možnosť mať komponenty na strane servera v spojení s novými akciami servera, ktoré sme práve pokryli, robí Next.js bezpečnejšou a výkonnejšou možnosťou v porovnaní s obyčajným Reactom. Ako vývojár Reactu by ste sa mali naučiť migrovať svoju aplikáciu na Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>