Käyttämällä Next.js:n uutta ominaisuutta Server Actions, toteutetaan evästeisiin perustuva tilaton sessio ja nautitaan Server Actionsin eduista.
Paljon juhlittu App Routerin julkaisu toi mukanaan toisen ominaisuuden, Server Actions, Next.js:ään. Tämä uusi innovaatio helpottaa palvelinpuolen tietojen käsittelyä, vähentää riippuvuutta asiakaspuolen JavaScriptistä ja parantaa lomakkeita asteittain käyttämällä JavaScriptiä ja Reactia vankkojen web-sovellusten luomiseen ilman perinteisiä REST API:ita.
Tässä artikkelissa sukellamme tämän innovaation tarjoamiin hyötyihin ja näemme sen toiminnassa toteuttaessamme evästeisiin perustuvan tilattoman session Next.js:lle. Tämä artikkeli toimii vaihe vaiheelta etenevänä oppaana, joka johdattaa sinut läpi demoprojektin luomisen App Routerilla.
Käytännön esimerkkimme voidaan helposti ottaa käyttöön Vercelissä Edge Runtime avulla. Ja voit ladata koko lähdekoodin GitHubista.
Perinteisesti, jos haluamme luoda Next.js web-sovelluksen, joka tekee kyselyjä tietokantaan taustalla, saatamme luoda joitakin REST API:eja tilan vahvistamiseksi ja tietokantakyselyjä varten, ja sitten etupään React-sovellus kutsuu näitä API:eja. Mutta jos ei ole tarvetta avata API:a yleisölle ja tämä react-sovellus on ainoa asiakas, tuntuu tarpeettomalta käyttää REST API:eja, koska niitä kutsumme vain itse.
Server Actionsien avulla React-komponentti voi nyt suorittaa palvelinpuolen koodia. Sen sijaan, että meidän tarvitsisi manuaalisesti luoda API-päätepiste, Server Actions luo automaattisesti päätepisteen Next.js:n käytettäväksi taustalla. Kun kutsutaan Server Actionia, Next.js lähettää POST-pyynnön sivulle, jolla ollaan, metatiedoilla, jotka kertovat, minkä toiminnon suorittaa.
Next.js on suosittu kehys tilattomien sovellusten luomiseen, mikä usein tarkoittaa, että emme voi käyttää muistia session säilyttämiseen. Perinteiset sessiot edellyttävät ulkoisen tallennuspalvelun, kuten Redisin tai tietokannan, käyttöä.
Kuitenkin, kun session tiedot pysyvät riittävän pieninä, meillä on vaihtoehtoinen tapa: suunnitella tilaton sessio käyttäen turvallisia salausmenetelmiä ja evästeitä, jotka on tallennettu asiakaspuolelle. Tämä menetelmä ohittaa tarpeen ulkoiseen tallennukseen ja pitää session tiedot hajautettuna, tarjoten merkittäviä etuja palvelimen kuormituksessa ja sovelluksen kokonaisessa suorituskyvyssä.
Tavoitteenamme on kevyt, tehokas tilaton sessio, joka hyödyntää asiakaspuolen tallennusmahdollisuuksia ja varmistaa turvallisuuden hyvin toteutetun salauksen avulla.
Ensiksi, meidän on aloitettava uusi projekti:
Lisätietoja asennuksesta löydät virallisesta oppaasta.
Helpottaaksemme Server Actionsin ymmärtämistä, luomme ensimmäisenä yksinkertaistetun version sessiosta. Tässä versiossa käytämme JSONia session tietojen säilyttämiseen evästeissä.
Luo tiedosto nimeltä session/index.ts ja lisää seuraava koodi:
Ensimmäinen rivi "use server" merkitsee tämän tiedoston funktiot Server Actionseiksi.
Koska emme voi käyttää request ja response suoraan, käytämme next/headers evästeiden lukemiseen ja kirjoittamiseen. Tämä on saatavilla vain Server Actionsissa.
Session kirjaston ollessa valmis, on aika toteuttaa sisään- ja uloskirjautumistoiminto, joka esittelee session käytettävyyttä.
Lisää seuraava koodi user/index.ts:iin:
Tässä käytämme 'leikkimielistä' sisäänkirjautumisprosessia, joka vaatii vain käyttäjätunnuksen.
App Routerissa sivu on yleensä asynkroninen komponentti, eikä Server Actionseja voida kutsua suoraan tällaisesta komponentista. Meidän on luotava komponentteja käyttäen "use client":
components/sign-in.tsx
components/sign-out.tsx
Lopuksi, rakennetaan app/page.tsx
Server Actionsin työ on valmis. Nyt viimeinen osa liittyy salauksen toteuttamiseen, joka voidaan saavuttaa crypto-kirjaston avulla.
Seuraavaksi muokkaa session kirjastoa toteuttamaan seuraavaa:
Onnittelut! Olet onnistuneesti toteuttanut tilattoman session Next.js:lle. Tässä on online esikatselu Vercelissä, ja voit ladata koko lähdekoodin täältä. Toivomme, että tämä opas auttaa sinua ymmärtämään uuden Server Actions -ominaisuuden.
Seuraavaksi tutkimme, miten Server Actions -toimintoja voidaan käyttää Logton integroimiseksi Next.js:ään. Pysy kuulolla!