Palvelintoiminnot React 19:ssä ja Next.js:ssä

Server Actions ovat async-funktioita, jotka suoritetaan palvelimella, eivät selaimessa. Ne merkitään tiedoston alkuun tai funktion rungon alkuun sijoitettavalla 'use server'-direktiivillä. Direktiivi kertoo kehykselle, ettei funktiota saa koskaan suorittaa asiakaspuolella.

Koska Server Actions suoritetaan palvelimella, niillä on pääsy koko palvelinkontekstiin: tietokantayhteyksiin, ympäristön salaisuuksiin, istuntotietoihin ja tiedostojärjestelmäresursseihin. Tämä eroaa olennaisesti asiakaskomponenteista, jotka voivat käyttää vain sitä, minkä selain tarjoaa.

Kun asiakaskomponentti kutsuu Server Actionia, Next.js tekee automaattisesti HTTP POST -pyynnön erityiseen RSC-päätepisteeseen. Kehys hoitaa argumenttien serialisoinnin ja siirtokerroksen, joten näitä muutoksia varten ei tarvitse kirjoittaa fetch()-kutsuja käsin.

Server Actions poistavat monissa tietoja muuttavissa tilanteissa API-reittien tarpeen. Itse action toimii päätepisteenä — määrittelette logiikan kerran palvelinfunktiona ja kutsutte sitä suoraan asiakaskomponentista ikään kuin se olisi paikallinen funktio.

Server Actions oli alun perin Next.js-kohtainen käsite, mutta React 19 nostaa ne Reactin ensiluokkaiseksi ominaisuudeksi. Tämä tarkoittaa, että myös muut bundlerit ja viitekehykset kuin Next.js voivat toteuttaa saman mallin React-määrittelyä noudattaen.

Server Actions ovat kokeellisia React 19 RC:ssä, mutta ne ovat olleet vakaita Next.js 14+:n App Routerissa niiden käyttöönotosta lähtien. Jos rakennatte tuotantosovellusta tänä päivänä Next.js:n App Routerilla, Server Actions on täysin tuettu ja suositeltu toimintamalli.

Yksi Server Actionsin tärkeimmistä tietoturvaominaisuuksista on, etteivät salaisuudet koskaan päädy selaimeen. Server Actionin sisällä käytettäviä ympäristömuuttujia, kuten tietokantojen salasanoja ja API-avaimia, ei koskaan sisällytetä asiakaspuolen bundleen, koska funktion runkoa ei koskaan lähetetä selaimeen.

HTML-lomake-elementit voivat ottaa Server Actionin suoraan vastaan action-attribuutilla: <form action={myServerAction}>. React sieppaa lomakkeen lähetyksen ja kutsuu Server Actionia lomaketietojen kanssa, mikä mahdollistaa palvelinpuolen muutokset ilman asiakaspuolen JavaScript-kytkentää.

Kun Server Action käynnistetään, React serialisoi actionin argumentit POST-pyynnön rungoksi. Palvelin deserialisoi ne, suorittaa funktion, serialisoi palautusarvon ja lähettää sen takaisin. Vain serialisoitavat arvot (merkkijonot, numerot, taulukot ja tavalliset objektit) voivat ylittää rajan.

Voitte määrittää Server Actionin moduulitasolla tiedostossa, jonka alussa on 'use server', tai upottaa sen Server Componentin sisään lisäämällä 'use server' async-funktion alkuun. Molemmat tavat tuottavat saman lopputuloksen: vain palvelimella kutsuttavissa olevan funktion.

Asiakaskomponentit tuovat Server Actionit käyttöön ja kutsuvat niitä kuten tavallisia async-funktioita. Kutsusyntaksi on sama kuin paikallista async-funktiota kutsuttaessa, mutta suoritus tapahtuu kokonaan palvelimella. Tämä abstraktio pitää asiakaskomponentit selkeinä ja vapaina fetch-kutsujen vaatimalta oheiskoodilta.

Server Actions ovat async-palvelinpuolen funktioita, jotka merkitään 'use server'-direktiivillä. Ne voivat käyttää palvelinkontekstia, kuten tietokantayhteyksiä ja ympäristön salaisuuksia. Next.js hoitaa HTTP-siirron automaattisesti, ja React 19 tekee niistä viitekehyksestä riippumattoman ominaisuuden. Lomakkeet voivat käyttää niitä suoraan action-attribuutin kautta, eivätkä niiden sisältämät salaisuudet koskaan päädy selaimeen.