Jak používat akce serveru Next.js

Vydání 13.4 Next.js přišlo se stabilním App routerem a schopností provádět mutaci dat pomocí akcí serveru. Tato funkce je absolutní změnou hry, protože vám umožňuje provádět mutace dat výhradně ze serverových komponent. To přináší řadu výhod v oblastech, jako je rychlost, bezpečnost a celkový výkon aplikace.

Zjistěte, co jsou akce serveru a jak tuto novou funkci používat ve vaší aplikaci Next.js.

Co jsou akce serveru?

Akce serveru vám umožňují psát jednorázové funkce na straně serveru přímo vedle vašich serverových komponent. To je obrovské, protože již nemusíte psát trasy API při odesílání formulářů nebo provádění jakéhokoli jiného druhu mutace dat, včetně Mutace dat GraphQL.

Můžete mít funkce, které běží na vašem serveru, a pak je můžete volat z klientských nebo serverových komponent. Toto je funkce alfa v Next.js 13.4 a je postavena na React Actions. Použití akcí serveru vede k omezení JavaScriptu na straně klienta a může vám pomoci vytvářet postupně vylepšené formuláře.

Příklad akcí serveru

Pomocí akcí serveru můžete provádět mutace v souboru Next.js na serveru. Podívejte se na tuto novou funkci s příkladem stránky Next.js, která vykresluje formulář umožňující vytvořit příspěvek.

Zde jsou dovozy:

import Odkaz z"další/odkaz"
import FormGroup z"@/components/FormGroup"
import { revalidateTag } z"další/mezipaměť"
import { přesměrovat } z"další/navigace"

Nyní kód pro vytvoření příspěvku. Tato funkce je akcí serveru; běží na serveru a odešle název příspěvku a tělo do API (které vytvoří příspěvek v databázi):

asynchronnífunkcecreatePost(data) {
"použít server"
konst title = data.get("titul")
konst tělo = data.get("tělo")
čekat vynést(" http://127.0.0.1/posts", {
 záhlaví: {"Typ obsahu": "application/json"},
 metoda: POST,
 tělo: JSON.stringify({title, body})
 })
 revalidateTag("příspěvky")
 přesměrovat("/")
}

Tato funkce získá název příspěvku a tělo, které pak odešle /posts koncový bod prostřednictvím požadavku POST. Poté donutí mezipaměť obnovit obsah spojený se značkou „posts“ a přesměruje zpět na domovskou stránku.

Zde je formulář pro vyzvednutí názvu a textu nového příspěvku:

vývoznívýchozí NewPostForm() {
vrátit se (





"titul">Název</label>
"text" jméno="titul" id="titul" />
 </FormGroup>
 </div>




"titul">Tělo</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žit <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Vidíte, že formulář neobsahuje žádnou logiku související s vytvořením příspěvku, pouze akci formuláře: funkci <strong>createPost()</strong>. Připomeňme, že funkce createPost má direktivu "use server", která deklaruje, že vše v tom je funkce by měla běžet na serveru.</p> <p>Veškerý kód běží na serveru a váš klient nic neví o tom. Je to proto, že formulář je serverová komponenta a na serveru se nic dynamicky nevykresluje klient.</p> <p>Když kliknete na tlačítko <strong>Uložit</strong>, Next.js zavolá <strong>createPost()</strong> funkce. Tím se odešle název a tělo jako data formuláře, která se odešlou do místního rozhraní API, aby se uložily informace.</p> <h2 id="revalidating-the-post"> Opětovné ověření příspěvku </h2> <p>V dolní části funkce <strong>createPost()</strong> je následující řádek kódu:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code></code></pre> <p>Abyste pochopili, co tato funkce dělá, představte si, že máte stránku s příspěvky. Uvnitř komponenty příspěvků byste zavolali funkci s názvem <strong>getPosts()</strong>, abyste získali všechny příspěvky z databáze a vykreslili je tak, aby je uživatel viděl:</p> <pre> <code><span>exportovat</span> <span>výchozí</span> <span>async</span> <span><span>funkce</span> <span>Příspěvky</span>() span>{<br> <span>konst</span> příspěvků = <span>čekat</span> getPosts()</span></code><p><code> <span>návrat</span> (<br> <div>
<br> {posts.map(<span><span>příspěvek</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>Funkce <strong>getPosts()</strong> by vypadala takto:</p> <pre> <code><span>async</span> <span><span>funkce</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>wait</span> načíst(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> další: {<span>tagy</span>: [<span>"posts"</span>], <span>revalidate</span>: <span>3600</span> }<br> })</code><p><code> <span>návrat</span> res.json()<br>}<br></code> </p></pre> <p>Tato funkce předá možnost <strong>další</strong> k načtení, což vám umožní nastavit období pro opětovné ověření. Ve výchozím nastavení je každý jednotlivý požadavek načtení, který provedete uvnitř komponenty serveru, navždy uložen do mezipaměti. Sledování mezipaměti a její obnovení v případě potřeby je důležitou součástí <span>načítání dat Next.js</span>.</p> <p>Výše uvedený kód říká Next.js, aby uložila data <strong>příspěvků</strong> do mezipaměti po dobu až jedné hodiny (3 600 sekund). Po hodině se data stanou zastaralými a Next.js je obnoví, aby získal nejnovější data z databáze.</p> <p>Nezapomeňte, že funkce <strong>createPost()</strong> volá <strong>revalidateTag("posts")</strong>, jakmile dokončí zbytek své práce. To přinutí Next.js znovu načíst data, která by měla zahrnovat nový příspěvek, který aplikace právě vytvořila.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Důkaz, že váš kód běží na serveru </h2> <p>Chcete-li si být jisti, že veškerý kód běží na serveru, můžete do souboru přidat následující příkaz protokolu konzoly Funkce <strong>createPost()</strong>:</p> <pre> <code><span>console</span>.log(<span>"Běží na serveru"</span>)</code> </pre> <p>Potom se pokuste vytvořit nový příspěvek kliknutím na tlačítko Odeslat. Pokud váš kód běží na serveru, tato zpráva protokolu se zobrazí na vašem terminálu. Pokud však běží na klientovi, protokol se zobrazí v konzole prohlížeče.</p> <p>To umožňuje bezpečné umístění citlivých informace, jako jsou proměnné prostředí, databázová připojení a hesla na serveru, aniž by se museli obávat, že budou vystaveny klienta. Poté můžete <span>číst řetězce ze souboru .env</span> v aplikaci Next.js.</p> <p>Můžete chcete vyhradit použití akcí serveru pro verze Next.js novější než 13.4, zejména v Výroba. Ale stále je opravdu vzrušující sledovat, kam tato funkce směřuje, protože neustále tlačí na to, co můžete udělat přesouváním stále více věcí na server. Mělo by to usnadnit psaní vašich klientských aplikací a mnohem zábavnější proces jejich vývoje.</p> <h2 id="learn-more-about-migrating-to-next-js"> Další informace o migraci na další .js </h2> <p>Mnoho vývojářů front-endu používá React pro vývoj uživatelského rozhraní. Ale díky funkcím, jako je vykreslování na straně serveru a generování statického webu, mnoho z těchto vývojářů migruje své aplikace na Next.js. Tato migrace je velmi přímočará, protože React je z hlediska syntaxe dosti podobný Next.js.</p> <p>Další zvýšení výkonu a zabezpečení si migraci ještě více vyžádají. Možnost mít komponenty na straně serveru ve spojení s novými akcemi serveru, které jsme právě probrali, činí z Next.js bezpečnější a výkonnější možnost ve srovnání s obyčejným Reactem. Jako vývojář React byste se měli naučit migrovat svou aplikaci na Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>