Next.js 14 Server Actions: Vormide käsitlemise parimate tavade valdamine

Next.js 14 toob endaga kaasa võimsad funktsioonid jõudluspõhiste ja kasutajasõbralike veebirakenduste loomiseks. Nende hulgas paistavad Server Actions silma kui transformatiivne viis vormide esitamise ja andmemuutuste käsitlemiseks otse serveris. See juhend pakub põhjalikku ülevaadet Server Actions'itest Next.js 14-s, keskendudes vormide käsitlemise parimatele tavadele, andmete valideerimisele, turvalisusele ja täiustatud tehnikatele. Uurime praktilisi näiteid ja pakume rakendatavaid teadmisi, mis aitavad teil luua robustseid ja skaleeritavaid veebirakendusi.

Mis on Next.js Server Actions?

Server Actions on asünkroonsed funktsioonid, mis käivitatakse serveris ja mida saab otse Reacti komponentidest välja kutsuda. Need kaotavad vajaduse traditsiooniliste API-marsruutide järele vormide esitamise ja andmemuutuste käsitlemiseks, mille tulemuseks on lihtsustatud kood, parem turvalisus ja suurem jõudlus. Server Actions on React Server Components (RSC), mis tähendab, et need käivitatakse serveris, tagades kiiremad esialgsed lehe laadimised ja parema SEO.

Server Actions'i peamised eelised:

• Lihtsustatud kood: Vähendage korduvat koodi, kaotades vajaduse eraldi API-marsruutide järele.
• Parem turvalisus: Serveripoolne täitmine minimeerib kliendipoolseid turvanõrkusi.
• Suurem jõudlus: Käivitage andmemuutused otse serveris kiiremate vastuseaegade saavutamiseks.
• Optimeeritud SEO: Kasutage serveripoolset renderdamist paremaks otsingumootorite indekseerimiseks.
• Tüübiohutus: Saage kasu täielikust tüübiohutusest TypeScriptiga.

Next.js 14 projekti seadistamine

Enne Server Actions'itesse süvenemist veenduge, et teil on Next.js 14 projekt seadistatud. Kui alustate nullist, looge uus projekt järgmise käsuga:

            npx create-next-app@latest my-next-app
            

              
                Copy
              
            
          

Veenduge, et teie projekt kasutab app kaustastruktuuri, et täielikult ära kasutada Server Components'i ja Actions'i võimalusi.

Põhiline vormide käsitlemine Server Actions'iga

Alustame lihtsa näitega: vorm, mis esitab andmeid uue elemendi loomiseks andmebaasis. Kasutame lihtsat vormi sisestusvälja ja esitamisnupuga.

Näide: Uue elemendi loomine

Esmalt defineerige Server Action funktsioon oma Reacti komponendis. See funktsioon tegeleb vormi esitamise loogikaga serveris.

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Simuleeri andmebaasi interaktsiooni
  console.log('Loon elementi:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuleeri latentsust

  console.log('Element edukalt loodud!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    await createItem(formData);
    setIsSubmitting(false);
  }

  return (
    

      Elemendi nimi:
      
      
        {isSubmitting ? 'Loon...' : 'Loo element'}
      
    
  );
}

            

              
                Copy
              
            
          

Selgitus:

• Direktiiv 'use client' näitab, et tegemist on kliendikomponendiga.
• Funktsioon createItem on märgistatud direktiiviga 'use server', mis näitab, et see on Server Action.
• Funktsioon handleSubmit on kliendipoolne funktsioon, mis kutsub välja serveri tegevuse. See haldab ka kasutajaliidese olekut, näiteks nupu keelamist esitamise ajal.
• Elemendi <form> atribuut action on seatud funktsioonile handleSubmit.
• Meetod formData.get('name') hangib sisestusvälja 'name' väärtuse.
• await new Promise simuleerib andmebaasi operatsiooni ja lisab latentsust.

Andmete valideerimine

Andmete valideerimine on andmete terviklikkuse tagamiseks ja turvanõrkuste ennetamiseks ülioluline. Server Actions pakub suurepärast võimalust serveripoolse valideerimise teostamiseks. See lähenemine aitab maandada riske, mis on seotud ainult kliendipoolse valideerimisega.

Näide: Sisendandmete valideerimine

Muutke createItem Server Action'it, et lisada valideerimisloogika.

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  if (!name || name.length < 3) {
    throw new Error('Elemendi nimi peab olema vähemalt 3 tähemärki pikk.');
  }

  // Simuleeri andmebaasi interaktsiooni
  console.log('Loon elementi:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuleeri latentsust

  console.log('Element edukalt loodud!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Tekkis viga.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        Elemendi nimi:
        
        
          {isSubmitting ? 'Loon...' : 'Loo element'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Selgitus:

• Funktsioon createItem kontrollib nüüd, kas name on kehtiv (vähemalt 3 tähemärki pikk).
• Kui valideerimine ebaõnnestub, visatakse viga.
• Funktsioon handleSubmit on uuendatud, et püüda kinni kõik Server Action'i poolt visatud vead ja kuvada kasutajale veateade.

Valideerimisraamatukogude kasutamine

Keerukamate valideerimisstsenaariumide jaoks kaaluge valideerimisraamatukogude kasutamist nagu:

• Zod: TypeScript-põhine skeemi deklareerimise ja valideerimise raamatukogu.
• Yup: JavaScripti skeemiehitaja väärtuste parsimiseks, valideerimiseks ja teisendamiseks.

Siin on näide Zodi kasutamisest:

            // app/utils/validation.ts
import { z } from 'zod';

export const CreateItemSchema = z.object({
  name: z.string().min(3, 'Elemendi nimi peab olema vähemalt 3 tähemärki pikk.'),
});

            

              
                Copy
              
            
          

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { CreateItemSchema } from '../utils/validation';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  const validatedFields = CreateItemSchema.safeParse({ name });

  if (!validatedFields.success) {
    return { errors: validatedFields.error.flatten().fieldErrors };
  }

  // Simuleeri andmebaasi interaktsiooni
  console.log('Loon elementi:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuleeri latentsust

  console.log('Element edukalt loodud!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Tekkis viga.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        Elemendi nimi:
        
        
          {isSubmitting ? 'Loon...' : 'Loo element'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Selgitus:

• CreateItemSchema defineerib valideerimisreeglid väljale name, kasutades Zodi.
• Meetod safeParse üritab sisendandmeid valideerida. Kui valideerimine ebaõnnestub, tagastab see objekti vigadega.
• Objekt errors sisaldab üksikasjalikku teavet valideerimise ebaõnnestumiste kohta.

Turvakaalutlused

Server Actions parandab turvalisust, käivitades koodi serveris, kuid siiski on oluline järgida turvalisuse parimaid tavasid, et kaitsta oma rakendust levinud ohtude eest.

Saididevahelise päringu võltsimise (CSRF) ennetamine

CSRF-rünnakud kasutavad ära usaldust, mis veebisaidil on kasutaja brauseri vastu. CSRF-rünnakute ennetamiseks rakendage CSRF-kaitsemehhanisme.

Next.js tegeleb CSRF-kaitsega automaatselt Server Actions'i kasutamisel. Raamistik genereerib ja valideerib iga vormi esitamise jaoks CSRF-tõendi, tagades, et päring pärineb teie rakendusest.

Kasutaja autentimise ja autoriseerimise käsitlemine

Veenduge, et ainult volitatud kasutajad saavad teatud toiminguid teha. Rakendage autentimis- ja autoriseerimismehhanisme, et kaitsta tundlikke andmeid ja funktsionaalsust.

Siin on näide NextAuth.js kasutamisest Server Action'i kaitsmiseks:

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { getServerSession } from 'next-auth';
import { authOptions } from '../../app/api/auth/[...nextauth]/route';

async function createItem(formData: FormData) {
  'use server'

  const session = await getServerSession(authOptions);

  if (!session) {
    throw new Error('Volitamata');
  }

  const name = formData.get('name') as string;

  // Simuleeri andmebaasi interaktsiooni
  console.log('Loon elementi:', name, 'kasutaja poolt:', session.user?.email);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuleeri latentsust

  console.log('Element edukalt loodud!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Tekkis viga.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        Elemendi nimi:
        
        
          {isSubmitting ? 'Loon...' : 'Loo element'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Selgitus:

• Funktsioon getServerSession hangib kasutaja seansi teabe.
• Kui kasutaja pole autenditud (seanss puudub), visatakse viga, mis takistab Server Action'i käivitamist.

Sisendandmete puhastamine

Puhastage sisendandmed, et vältida saididevahelise skriptimise (XSS) rünnakuid. XSS-rünnakud toimuvad siis, kui veebisaidile süstitakse pahatahtlikku koodi, mis võib potentsiaalselt kahjustada kasutaja andmeid või rakenduse funktsionaalsust.

Kasutage raamatukogusid nagu DOMPurify või sanitize-html, et puhastada kasutaja sisestatud andmeid enne nende töötlemist oma Server Actions'ites.

Täiustatud tehnikad

Nüüd, kui oleme põhitõed selgeks saanud, uurime mõningaid täiustatud tehnikaid Server Actions'i tõhusaks kasutamiseks.

Optimistlikud uuendused

Optimistlikud uuendused pakuvad paremat kasutajakogemust, uuendades kasutajaliidest kohe, justkui tegevus õnnestuks, isegi enne kui server seda kinnitab. Kui tegevus serveris ebaõnnestub, taastatakse kasutajaliides eelmisesse olekusse.

            // app/components/UpdateItemForm.tsx
'use client';

import { useState } from 'react';

async function updateItem(id: string, formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Simuleeri andmebaasi interaktsiooni
  console.log('Uuendan elementi:', id, 'nimega:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuleeri latentsust

  // Simuleeri ebaõnnestumist (demonstratsiooni eesmärgil)
  const shouldFail = Math.random() < 0.5;
  if (shouldFail) {
    throw new Error('Elemendi uuendamine ebaõnnestus.');
  }

  console.log('Element edukalt uuendatud!');
  return { name }; // Tagasta uuendatud nimi
}

export default function UpdateItemForm({ id, initialName }: { id: string; initialName: string }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  const [itemName, setItemName] = useState(initialName);

  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);

    // Uuenda kasutajaliidest optimistlikult
    const newName = formData.get('name') as string;
    setItemName(newName);

    try {
      const result = await updateItem(id, formData);
      // Kui õnnestub, on uuendus juba kajastatud kasutajaliideses setItemName kaudu

    } catch (error: any) {
      setErrorMessage(error.message || 'Tekkis viga.');
      // Taasta kasutajaliides vea korral
      setItemName(initialName);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      
Praegune nimi: {itemName}
      

        Uus elemendi nimi:
        
        
          {isSubmitting ? 'Uuendan...' : 'Uuenda element'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Selgitus:

• Enne Server Action'i kutsumist uuendatakse kasutajaliides kohe uue elemendi nimega, kasutades setItemName.
• Kui Server Action ebaõnnestub, taastatakse kasutajaliides algse elemendi nimega.

Andmete taasvalideerimine

Pärast seda, kui Server Action on andmeid muutnud, peate võib-olla vahemällu salvestatud andmed uuesti valideerima, et tagada kasutajaliidese värskeimate muudatuste kajastamine. Next.js pakub andmete uuesti valideerimiseks mitmeid viise:

• Revalidate Path: Valideerige uuesti vahemälu konkreetse tee jaoks.
• Revalidate Tag: Valideerige uuesti vahemälu konkreetse sildiga seotud andmete jaoks.

Siin on näide tee uuesti valideerimisest pärast uue elemendi loomist:

            // app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { revalidatePath } from 'next/cache';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Simuleeri andmebaasi interaktsiooni
  console.log('Loon elementi:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuleeri latentsust

  console.log('Element edukalt loodud!');

  revalidatePath('/items'); // Valideeri uuesti /items tee
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Tekkis viga.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        Elemendi nimi:
        
        
          {isSubmitting ? 'Loon...' : 'Loo element'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

            

              
                Copy
              
            
          

Selgitus:

• Funktsioon revalidatePath('/items') tühistab vahemälu tee /items jaoks, tagades, et järgmine päring sellele teele hangib uusimad andmed.

Server Actions'i parimad tavad

Server Actions'i eeliste maksimeerimiseks kaaluge järgmisi parimaid tavasid:

• Hoidke Server Actions väikesed ja keskendunud: Server Actions peaksid täitma ühte, hästi defineeritud ülesannet. Vältige keerulist loogikat Server Actions'ites, et säilitada loetavus ja testitavus.
• Kasutage kirjeldavaid nimesid: Andke oma Server Actions'itele kirjeldavad nimed, mis näitavad selgelt nende eesmärki.
• Käsitlege vigu sujuvalt: Rakendage robustne veakäsitlus, et anda kasutajale informatiivset tagasisidet ja vältida rakenduse kokkujooksmist.
• Valideerige andmeid põhjalikult: Teostage põhjalik andmete valideerimine, et tagada andmete terviklikkus ja ennetada turvanõrkusi.
• Turvake oma Server Actions: Rakendage autentimis- ja autoriseerimismehhanisme, et kaitsta tundlikke andmeid ja funktsionaalsust.
• Optimeerige jõudlust: Jälgige oma Server Actions'i jõudlust ja optimeerige neid vastavalt vajadusele, et tagada kiired vastuseajad.
• Kasutage vahemälu tõhusalt: Kasutage Next.js'i vahemälumehhanisme jõudluse parandamiseks ja andmebaasi koormuse vähendamiseks.

Levinumad lõksud ja kuidas neid vältida

Kuigi Server Actions pakub mitmeid eeliseid, on olemas mõned levinud lõksud, millele tähelepanu pöörata:

• Liiga keerulised Server Actions: Vältige liiga palju loogikat ühes Server Action'is. Jaotage keerulised ülesanded väiksemateks, paremini hallatavateks funktsioonideks.
• Veakäsitluse eiramine: Lisage alati veakäsitlus, et püüda kinni ootamatuid vigu ja anda kasutajale kasulikku tagasisidet.
• Turvalisuse parimate tavade eiramine: Järgige turvalisuse parimaid tavasid, et kaitsta oma rakendust levinud ohtude, nagu XSS ja CSRF, eest.
• Andmete taasvalideerimise unustamine: Veenduge, et valideerite vahemällu salvestatud andmed uuesti pärast seda, kui Server Action on andmeid muutnud, et hoida kasutajaliides ajakohasena.

Kokkuvõte

Next.js 14 Server Actions pakub võimsat ja tõhusat viisi vormide esitamise ja andmemuutuste käsitlemiseks otse serveris. Järgides selles juhendis kirjeldatud parimaid tavasid, saate luua robustseid, turvalisi ja jõudluspõhiseid veebirakendusi. Kasutage Server Actions'it oma koodi lihtsustamiseks, turvalisuse suurendamiseks ja üldise kasutajakogemuse parandamiseks. Integreerides neid põhimõtteid, arvestage oma arendusvalikute globaalse mõjuga. Veenduge, et teie vormid ja andmetöötlusprotsessid on ligipääsetavad, turvalised ja kasutajasõbralikud erinevatele rahvusvahelistele sihtrühmadele. See pühendumus kaasavusele ei paranda mitte ainult teie rakenduse kasutatavust, vaid laiendab ka selle haaret ja tõhusust globaalses mastaabis.