Lomaketoiminnot: API-reittien korvaaminen mutaatioissa

Perinteisissä Next.js-sovelluksissa lomakkeiden lähetykset edellyttävät asiakaskomponenttia, jossa oleva onSubmit-käsittelijä kutsuu fetch()-funktiota tietojen POST-lähettämiseksi API-reitille. Tämä toimintamalli toimii, mutta edellyttää sekä asiakaspuolen fetch-logiikan että palvelinpuolen reittikäsittelijän erillistä kirjoittamista ja ylläpitoa.

Server Actionsin avulla fetch-kutsu ja API-reitti korvataan yhdellä funktiolla. Lomake-elementti saa Server Actionin action-proppina: <form action={serverAction}>. React sieppaa lähetyksen ja kutsuu actionia lomaketietojen kanssa automaattisesti.

Server Action saa lomakkeesta käynnistettäessä automaattisesti argumentikseen FormData-objektin. Yksittäisiä kenttiä käytetään formData.get('email')-kutsulla, joka palauttaa arvon merkkijonona. Kaikki tavalliset FormData-metodit ovat käytettävissä, mukaan lukien monivalintakenttiä varten tarkoitettu getAll().

Server Action voi palauttaa serialisoitavan arvon, jota asiakas voi käyttää. Virheobjektin, kuten { error: 'Email already exists' }, tai onnistumislipun, kuten { success: true }, palauttaminen antaa asiakkaalle mahdollisuuden päivittää käyttöliittymän tilanteen mukaisesti ilman koko sivun uudelleenlatausta.

Koska lomakkeen action on Server Action, lomakkeen sisältävän sivun komponentin ei tarvitse olla Client Component. Palvelin renderöi lomakkeen staattisena HTML:nä, ja vain interaktiiviset osat, kuten virheen näyttäminen, tarvitsevat asiakaspuolen JavaScriptiä. Tämä pienentää asiakasbundlea huomattavasti.

Lomake, jolla on action={serverAction}, toimii ilman JavaScriptin käyttöönottoa. Selain tekee tavallisen HTML-lomakkeen POST-pyynnön, palvelin suorittaa actionin ja palauttaa päivitetyn sivun. Tämä todellinen progressiivinen parannus tarkoittaa, että lomake toimii hallitusti myös rajoitetuissa ympäristöissä.

Kun Server Action muuttaa tietoja, välimuistissa olevat sivutiedot on päivitettävä. Kutsumalla revalidatePath('/dashboard')-funktiota actionin sisällä mitätöitte Next.js:n välimuistin kyseisen polun osalta, jolloin seuraava pyyntö noutaa tuoreet tiedot. Tämä on vakiintunut tapa pitää palvelimella renderöidyt sivut ajan tasalla muutosten jälkeen.

revalidateTag('user-data') tarjoaa tarkemman välimuistin mitätöinnin kuin revalidatePath. Merkitsette fetch-kutsut tunnisteella next: { tags: ['user-data'] } ja mitätöitte sitten kaikki tunnisteella merkityt tiedot kerralla Server Actionin sisältä riippumatta siitä, millä poluilla tiedot näytetään.

Server Actions voivat ohjata käyttäjän uudelle sivulle onnistuneen muutoksen jälkeen kutsumalla redirect('/success')-funktiota next/navigation-moduulista. Uudelleenohjaus käsitellään palvelimella, joten selain saa asianmukaisen navigointivastauksen asiakaspuolen uudelleenohjauksen sijaan.

Server Actions eivät rajoitu lomakkeiden lähetyksiin. Painikkeiden napsautuksia ja muita lomakkeettomia käynnistimiä varten actionin kutsu kannattaa kääriä rakenteeseen startTransition(() => action(arg)). Tämä merkitsee navigoinnin siirtymäksi, jolloin React voi pitää nykyisen käyttöliittymän näkyvissä, kun action suoritetaan palvelimella.

Server Actions ovat oikea paikka palvelinpuolen validointiin. Validoikaa FormData-kentät, palauttakaa validointivirheet, jos tarkistus epäonnistuu, ja jatkakaa muutokseen vasta, jos kaikki kentät ovat kelvollisia. Zodin kaltaiset kirjastot sopivat tähän hyvin: jäsentäkää FormData tyypitetyksi skeemaksi ja palauttakaa virhekartta virhetilanteessa.

Server Actions korvaavat fetch + API-reitti -mallin lomakkeiden tietojen muuttamisessa. Lomakkeen action-prop voi vastaanottaa Server Actionin suoraan, ja toiminto saa argumentikseen FormData-objektin. Actionit palauttavat serialisoitavia tuloksia käyttöliittymän päivityksiä varten, tukevat revalidatePath- ja revalidateTag-funktioita välimuistin mitätöintiin ja toimivat progressiivisesti ilman JavaScriptiä.