Kā izmantot Next.js servera darbības

Next.js 13.4 laidienā bija stabils lietotņu maršrutētājs un iespēja veikt datu mutāciju ar servera darbībām. Šī funkcija ir absolūts spēļu mainītājs, jo tas ļauj veikt datu mutācijas pilnībā no servera komponentiem. Tas sniedz daudzas priekšrocības tādās jomās kā ātrums, drošība un lietotnes vispārējā veiktspēja.

Uzziniet, kas ir servera darbības un kā izmantot šo jauno līdzekli lietojumprogrammā Next.js.

Kas ir servera darbības?

Servera darbības ļauj rakstīt vienreizējas servera puses funkcijas tieši blakus servera komponentiem. Tas ir milzīgi, jo jums vairs nav jāraksta API maršruti, iesniedzot veidlapas vai veicot jebkādas citas datu mutācijas, tostarp GraphQL datu mutācijas.

Jums var būt funkcijas, kas darbojas jūsu serverī, un pēc tam varat tās izsaukt no klienta vai servera komponentiem. Šī ir alfa funkcija programmā Next.js 13.4, un tā ir veidota, pamatojoties uz React Actions. Servera darbību izmantošana samazina klienta puses JavaScript un var palīdzēt izveidot pakāpeniski uzlabotas veidlapas.

Servera darbību piemērs

Izmantojot servera darbības, serverī varat veikt mutācijas iekšā Next.js. Apskatiet šo jauno līdzekli ar Next.js lapas piemēru, kas atveido veidlapu, kas ļauj izveidot ziņu.

Šeit ir importētie produkti:

imports Saite no"nākamais/saite"
imports FormGroup no"@/components/FormGroup"
imports { revalidateTag } no"nākamais/kešatmiņa"
imports { novirzīt } no"nākamais/navigācija"

Tagad kods, lai izveidotu ziņu. Šī funkcija ir servera darbība; tas darbojas serverī un nosūta ziņas virsrakstu un pamattekstu API (kas izveido ziņu datu bāzē):

asinhronsfunkcijuCreatePost(datus) {
"izmantot serveri"
konst virsraksts = data.get("nosaukums")
konst body = data.get("ķermenis")
gaidīt atnest(" http://127.0.0.1/posts", {
 galvene: {"Satura veids": "aplikācija/json"},
 metode: POST,
 korpuss: JSON.stringify({title, body})
 })
 revalidateTag("ziņas")
 redirect ("/")
}

Šī funkcija iegūst ziņas nosaukumu un pamattekstu, ko tā pēc tam nosūta uz /posts galapunkts, izmantojot POST pieprasījumu. Pēc tam tas liek kešatmiņai atsvaidzināt saturu, kas saistīts ar tagu "posts", un novirza atpakaļ uz sākumlapu.

Šeit ir veidlapa, lai apkopotu jauno ziņas nosaukumu un pamattekstu:

eksportētnoklusējuma NewPostForm() {
atgriezties (





"nosaukums">Nosaukums</label>
"teksts" vārds ="nosaukums" id="nosaukums" />
 </FormGroup>
 </div>




"nosaukums">Ķermenis</label>
"teksts" 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> Saglabāt <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Varat redzēt, ka veidlapā nav ietverta loģika saistībā ar ziņas izveidi, ir tikai veidlapas darbība: funkcija <strong>createPost()</strong>. Atcerieties, ka funkcijai createPost ir direktīva "lietot serveri", kas paziņo, ka viss tajā funkcijai jādarbojas serverī.</p> <p>Serverī darbojas viss kods, un jūsu klients neko nezina par to. Tas ir tāpēc, ka veidlapa ir servera komponents, un tajā nekas netiek dinamiski renderēts klientu.</p> <p>Kad noklikšķināt uz pogas <strong>Saglabāt</strong>, Next.js izsauc <strong>createPost()</strong> funkciju. Tādējādi virsraksts un pamatteksts tiek nosūtīts kā veidlapas dati, kas tiek publicēti vietējā API, lai saglabātu informāciju.</p> <h2 id="revalidating-the-post"> Ziņas atkārtota apstiprināšana </h2> <p>Funkcijas <strong>createPost()</strong> apakšā ir šāda koda rindiņa:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>Lai saprastu, ko šī funkcija dara, iedomājieties, ka jums ir ziņu lapa. Komponentā Ziņas ir jāizsauc funkcija ar nosaukumu <strong>getPosts()</strong>, lai iegūtu visas ziņas no jūsu datu bāzes un atveidotu tās lietotājam:</p> <pre> <code><span>eksportēt</span> <span>noklusējuma</span> <span>async</span> <span><span>funkcija</span> <span>Ziņas</span>() span>{<br> <span>const</span> ziņas = <span>gaidiet</span> getPosts()</span></code><p><code> <span>atgriezties</span> (<br> <div>
<br> {posts.map(<span><span>post</span> = ></span> {<br> <pastkartes atsl></pastkartes><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>Funkcija <strong>getPosts()</strong> izskatītos šādi:</p> <pre> <code><span>async</span> <span><span>funkcija</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>gaida</span> atnest(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> nākamais: {<span>tagi</span>: [<span>"ziņas"</span>], <span>pārbaudīt</span>: <span>3600</span> <br> })</code><p><code> <span>atgriezties</span> res.json()<br>}<br></code> </p></pre> <p>Šī funkcija nodod opciju <strong>nākamais</strong>, lai iegūtu, tādējādi ļaujot iestatīt atkārtotas apstiprināšanas periodu. Pēc noklusējuma katrs ieneses pieprasījums, ko veicat servera komponentā, tiek neatgriezeniski saglabāts kešatmiņā. Kešatmiņas izsekošana un nepieciešamības gadījumā tās atsvaidzināšana ir svarīga <span>datu ielādes daļa. Next.js</span>.</p> <p>Iepriekš minētais kods norāda Next.js kešatmiņā saglabāt <strong>ziņu</strong> datus līdz vienai stundai (3600 sekundes). Pēc stundas dati kļūst novecojuši, un Next.js tos atsvaidzina, lai iegūtu jaunākos datus no datu bāzes.</p> <p>Ņemiet vērā, ka funkcija <strong>createPost()</strong> izsauc <strong>revalidateTag("posts")</strong>, kad tā ir pabeigusi pārējo darbu. Tas liek Next.js atkārtoti izgūt datus, kuros jāiekļauj jaunā ziņa, ko tikko izveidojusi lietotne.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Pierādījums, ka jūsu kods darbojas serverī </h2> <p>Lai pārliecinātos, ka viss kods darbojas serverī, varat pievienot šādu konsoles žurnāla paziņojumu Funkcija <strong>createPost()</strong>:</p> <pre> <code><span>konsole</span>.log(<span>"Darbojas serverī"</span>)</code> </pre> <p>Pēc tam mēģiniet izveidot jaunu ziņu, noklikšķinot uz pogas Iesniegt. Ja jūsu kods darbojas serverī, šis žurnāla ziņojums tiks parādīts jūsu terminālī. Bet, ja tas darbojas klientā, žurnāls tiks parādīts pārlūkprogrammas konsolē.</p> <p>Tādējādi var droši ievietot sensitīvus datus. tādu informāciju kā vides mainīgie, datu bāzes savienojumi un paroles serverī, nebaidoties, ka tā tiks pakļauta klients. Pēc tam savā lietotnē Next.js varat <span>lasīt virknes no sava .env faila</span>.</p> <p>Jūs varat vēlaties rezervēt servera darbību izmantošanu Next.js versijām, kas jaunākas par 13.4, it īpaši ražošanu. Taču joprojām ir ļoti aizraujoši redzēt, kur šī funkcija nonāk, jo tā nepārtraukti veicina to, ko varat darīt, pārvietojot arvien vairāk lietas uz serveri. Tam vajadzētu atvieglot jūsu klientu lietotņu rakstīšanu un padarīt to izstrādes procesu daudz patīkamāku.</p> <h2 id="learn-more-about-migrating-to-next-js"> Uzziniet vairāk par migrēšanu uz nākamo. .js </h2> <p>Daudzi priekšgala izstrādātāji UI izstrādei izmanto React. Taču, pateicoties tādām funkcijām kā servera puses renderēšana un statiskās vietņu ģenerēšana, daudzi no šiem izstrādātājiem migrē savas lietotnes, lai izmantotu Next.js. Šī migrēšana ir ļoti vienkārša, jo React ir diezgan līdzīgs Next.js sintaksei.</p> <p>Papildu veiktspējas un drošības uzlabojumi padara migrāciju vēl vairāk vajadzīgu. Iespēja izmantot servera puses komponentus kopā ar jaunajām servera darbībām, kuras tikko aplūkojām, padara Next.js par drošāku un efektīvāku opciju salīdzinājumā ar vienkāršu React. Kā React izstrādātājam jums vajadzētu uzzināt, kā migrēt savu lietotni uz Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>