A Next.js szerverműveletek használata

A Next.js 13.4-es kiadása stabil App routerrel és szerverműveletekkel adatmutációt végezhet. Ez a funkció abszolút játékmódosító, mert lehetővé teszi, hogy teljes mértékben a szerver összetevőiből hajtson végre adatmutációkat. Ez számos előnnyel jár olyan területeken, mint a sebesség, a biztonság és az alkalmazás általános teljesítménye.

Ismerje meg, mik azok a szerverműveletek, és hogyan használhatja ezt az új funkciót a Next.js alkalmazásban.

Mik azok a szerverműveletek?

A kiszolgálóműveletek lehetővé teszik, hogy egyszeri kiszolgálóoldali funkciókat írjon közvetlenül a szerverösszetevők mellé. Ez óriási, mert többé nem kell API-útvonalakat írnia űrlapok beküldésekor vagy bármilyen más adatmutáció végrehajtása során, pl. GraphQL adatmutációk.

Lehetnek olyan függvényei, amelyek futnak a kiszolgálón, és ezután meghívhatja őket az ügyfél- vagy szerverkomponensekből. Ez egy alfa funkció a Next.js 13.4-ben, és a React Actionsre épül. A kiszolgálóműveletek használata csökkentett ügyféloldali JavaScript-kódot eredményez, és segíthet fokozatosan továbbfejlesztett űrlapok létrehozásában.

Példa szerver műveletekre

Szerverműveletekkel mutációkat hajthat végre a Next.js-ben, a szerveren. Tekintse meg ezt az új funkciót egy példa Next.js oldalon, amely egy űrlapot jelenít meg, amely lehetővé teszi a bejegyzés létrehozását.

Íme az import:

import Link tól től"következő/link"
import FormGroup tól től"@/components/FormGroup"
import { revalidateTag } tól től"következő/gyorsítótár"
import { átirányítás } tól től"következő/navigáció"

Most a bejegyzés létrehozásához szükséges kód. Ez a funkció egy szerverművelet; fut a szerveren, és elküldi a bejegyzés címét és törzsét az API-nak (amely létrehozza a bejegyzést az adatbázisban):

asyncfunkcióCreatePost(adat) {
"szerver használata"
const title = data.get("cím")
const body = data.get("test")
várja fetch(" http://127.0.0.1/posts", {
 fejléc: {"Tartalom típus": "alkalmazás/json"},
 módszer: POST,
 test: JSON.stringify({title, body})
 })
 revalidateTag("bejegyzések")
 redirect("/")
}

Ez a funkció megkapja a bejegyzés címét és törzsét, amelyet elküld a következőnek /posts végpont POST-kéréssel. Ezután arra kényszeríti a gyorsítótárat, hogy frissítse a "posts" címkével társított tartalmat, és visszairányítja a kezdőlapra.

Íme egy űrlap az új bejegyzés címének és törzsének összegyűjtésére:

exportalapértelmezett NewPostForm() {
Visszatérés (





"cím">Cím</label>
"szöveg" név="cím" id="cím" />
 </FormGroup>
 </div>




"cím">Test</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> Mentés <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Látható, hogy az űrlap nem tartalmaz logikát a bejegyzés létrehozásához, csak egy űrlapműveletet: a <strong>createPost()</strong> függvényt. Emlékezzünk vissza, hogy a createPost függvény rendelkezik a "use server" direktívával, amely kijelenti, hogy minden benne van funkciónak futnia kell a szerveren.</p> <p>Az összes kód fut a szerveren, és az ügyfél nem tud semmit erről. Ennek az az oka, hogy az űrlap egy kiszolgáló összetevő, és nincs semmi, ami dinamikusan jelenik meg az oldalon kliens.</p> <p>Amikor a <strong>Mentés</strong> gombra kattint, a Next.js meghívja a <strong>createPost()</strong> parancsot. funkció. Ez űrlapadatként elküldi a címet és a törzset, amelyeket a helyi API-ba tesz közzé, hogy elmentse az információkat.</p> <h2 id="revalidating-the-post"> A bejegyzés újraellenőrzése </h2> <p>A <strong>createPost()</strong> függvény alján a következő kódsor található:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>A funkció működésének megértéséhez képzelje el, hogy van egy bejegyzési oldala. A bejegyzések komponensen belül meg kell hívnia a <strong>getPosts()</strong> nevű függvényt, hogy az összes bejegyzést megkapja az adatbázisából, és megjelenítse azokat a felhasználó számára:</p> <pre> <code><span>exportálás</span> <span>alapértelmezett</span> <span>aszinkron</span> <span><span>funkció</span> <span>Bejegyzések</span>() span>{<br> <span>const</span> bejegyzések = <span>várak</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>A <strong>getPosts()</strong> függvény így néz ki:</p> <pre> <code><span>async</span> <span><span>függvény</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>várak</span> fetch(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> következő: {<span>címkék</span>: [<span>"bejegyzések"</span>], <span>újraellenőrzés</span>: <span>3600</span> <br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Ez a funkció a <strong>következő</strong> opciót továbbítja a letöltéshez, lehetővé téve az újraérvényesítési időszak beállítását. Alapértelmezés szerint minden egyes lekérési kérés, amelyet a kiszolgálókomponensen belül küld, örökre gyorsítótárban van. A gyorsítótár nyomon követése és szükség esetén frissítése az <span>adatbetöltés fontos része. Next.js</span>.</p> <p>A fenti kód arra utasítja a Next.js-t, hogy tárolja a <strong>bejegyzések</strong> adatait akár egy órán keresztül (3600 másodperc). Egy óra elteltével az adatok elavulttá válnak, és a Next.js frissíti őket, hogy a legfrissebb adatokat kapja meg az adatbázisból.</p> <p>Ne feledje, hogy a <strong>createPost()</strong> függvény meghívja a <strong>revalidateTag("posts")</strong> funkciót, miután befejezte a többi munkát. Ez arra kényszeríti a Next.js-t, hogy újra lekérje azokat az adatokat, amelyeknek tartalmazniuk kell az alkalmazás által létrehozott új bejegyzést.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Annak igazolása, hogy a kód fut a szerveren </h2> <p>Annak érdekében, hogy megbizonyosodjon arról, hogy az összes kód fut a kiszolgálón, hozzáadhatja a következő konzolnapló-utasítást a <strong>createPost()</strong> függvény:</p> <pre> <code><span>console</span>.log(<span>"Fut a szerveren"</span>)</code> </pre> <p>Ezután próbáljon meg új bejegyzést létrehozni a küldés gombra kattintva. Ha a kód fut a szerveren, a naplóüzenet megjelenik a terminálon. De ha a kliensen fut, akkor a napló megjelenik a böngészőkonzolban.</p> <p>Ez biztonságossá teszi az érzékeny beállítást. információkat, például környezeti változókat, adatbázis-kapcsolatokat és jelszavakat a kiszolgálón anélkül, hogy attól kellene tartaniuk, hogy ki lesz téve a ügyfél. Ezután <span>elolvashatja a karakterláncokat az .env fájlból</span> a Next.js alkalmazásban.</p> <p>Lehet szeretné fenntartani a szerverműveletek használatát a Next.js 13.4-nél újabb verzióihoz, különösen Termelés. De még mindig nagyon izgalmas látni, hogy ez a funkció merre halad, mivel folyamatosan nyomasztja, hogy mit tehet, ha egyre több dolgot helyez át a szerverre. Ez megkönnyíti az ügyfélalkalmazások írását, és sokkal élvezetesebbé teszi a fejlesztési folyamatot.</p> <h2 id="learn-more-about-migrating-to-next-js"> További információ a következőre költözésről .js </h2> <p>Sok előtér-fejlesztő használja a Reactot a felhasználói felület fejlesztéséhez. De az olyan funkcióknak köszönhetően, mint a szerveroldali megjelenítés és a statikus webhelygenerálás, sok ilyen fejlesztő migrálja alkalmazásait a Next.js használatára. Ez az áttelepítés nagyon egyszerű, mivel a React szintaktikailag nagyon hasonlít a Next.js-hez.</p> <p>A további teljesítmény- és biztonságinövelés még inkább szükségessé teszi az áttelepítést. A szerveroldali összetevők képessége, valamint az imént tárgyalt új kiszolgálóműveletek a Next.js-t biztonságosabbá és hatékonyabbá teszik a sima Reacthoz képest. React fejlesztőként meg kell tanulnia, hogyan migrálhatja át az alkalmazást a Next.js fájlba.</p> </div></code></p></pre></button>
</div></code></p></span>