Next.js 14 Serverio Veiksmai: Geriausių Formų Tvarkymo Praktikų Įvaldymas

Next.js 14 pristato galingas funkcijas, skirtas kurti našias ir vartotojui patogias interneto programas. Tarp jų Serverio Veiksmai (Server Actions) išsiskiria kaip transformuojantis būdas tvarkyti formų pateikimus ir duomenų mutacijas tiesiogiai serveryje. Šis vadovas pateikia išsamią Next.js 14 Serverio Veiksmų apžvalgą, sutelkiant dėmesį į geriausias formų tvarkymo praktikas, duomenų tikrinimą, saugumą ir pažangias technikas. Išnagrinėsime praktinius pavyzdžius ir pateiksime veiksmingų įžvalgų, kurios padės jums kurti patikimas ir keičiamo dydžio interneto programas.

Kas yra Next.js Serverio Veiksmai?

Serverio Veiksmai yra asinchroninės funkcijos, kurios veikia serveryje ir gali būti iškviečiamos tiesiogiai iš React komponentų. Jos pašalina poreikį tradiciniams API maršrutams tvarkyti formų pateikimus ir duomenų mutacijas, todėl kodas tampa paprastesnis, saugumas didesnis, o našumas geresnis. Serverio Veiksmai yra React Serverio Komponentai (RSCs), o tai reiškia, kad jie vykdomi serveryje, todėl pradiniai puslapių įkėlimai yra greitesni ir SEO geresnis.

Pagrindiniai Serverio Veiksmų privalumai:

Supaprastintas kodas: Sumažinkite pasikartojančio kodo kiekį, pašalindami poreikį kurti atskirus API maršrutus.
Pagerintas saugumas: Vykdymas serverio pusėje sumažina kliento pusės pažeidžiamumą.
Padidintas našumas: Vykdykite duomenų mutacijas tiesiogiai serveryje, kad atsakymai būtų greitesni.
Optimizuotas SEO: Išnaudokite serverio pusės atvaizdavimą (server-side rendering) geresniam paieškos sistemų indeksavimui.
Tipų saugumas: Pasinaudokite visapusišku tipų saugumu su TypeScript.

Next.js 14 Projekto Paruošimas

Prieš pradedant dirbti su Serverio Veiksmais, įsitikinkite, kad turite paruoštą Next.js 14 projektą. Jei pradedate nuo nulio, sukurkite naują projektą naudodami šią komandą:

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

Įsitikinkite, kad jūsų projektas naudoja app katalogo struktūrą, kad galėtumėte pilnai išnaudoti Serverio Komponentų ir Veiksmų privalumus.

Pagrindinis Formų Tvarkymas su Serverio Veiksmais

Pradėkime nuo paprasto pavyzdžio: forma, kuri pateikia duomenis, kad sukurtų naują elementą duomenų bazėje. Naudosime paprastą formą su įvesties lauku ir pateikimo mygtuku.

Pavyzdys: Naujo Elemento Kūrimas

Pirmiausia, apibrėžkite Serverio Veiksmo funkciją savo React komponente. Ši funkcija tvarkys formos pateikimo logiką serveryje.

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

import { useState } from 'react';

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

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

  // Duomenų bazės sąveikos imitavimas
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Vėlavimo imitavimas

  console.log('Item created successfully!'); // Elementas sėkmingai sukurtas!
}

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

  return (
    
      Elemento pavadinimas:
      
      
    
  );
}

Paaiškinimas:

'use client' direktyva nurodo, kad tai yra kliento komponentas.
createItem funkcija yra pažymėta 'use server' direktyva, nurodančia, kad tai yra Serverio Veiksmas.
handleSubmit funkcija yra kliento pusės funkcija, kuri iškviečia serverio veiksmą. Ji taip pat tvarko vartotojo sąsajos būseną, pavyzdžiui, išjungia mygtuką pateikimo metu.
<form> elemento action savybė yra nustatyta į handleSubmit funkciją.
formData.get('name') metodas gauna 'name' įvesties lauko reikšmę.
await new Promise imituoja duomenų bazės operaciją ir prideda vėlavimą.

Duomenų Tikrinimas

Duomenų tikrinimas yra labai svarbus siekiant užtikrinti duomenų vientisumą ir išvengti saugumo pažeidžiamumų. Serverio Veiksmai suteikia puikią galimybę atlikti tikrinimą serverio pusėje. Šis požiūris padeda sumažinti rizikas, susijusias tik su kliento pusės tikrinimu.

Pavyzdys: Įvesties Duomenų Tikrinimas

Pakeiskite createItem Serverio Veiksmą, kad įtrauktumėte tikrinimo logiką.

// 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('Elemento pavadinimas turi būti bent 3 simbolių ilgio.');
  }

  // Duomenų bazės sąveikos imitavimas
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Vėlavimo imitavimas

  console.log('Item created successfully!'); // Elementas sėkmingai sukurtas!
}

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 || 'Įvyko klaida.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Elemento pavadinimas:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paaiškinimas:

createItem funkcija dabar tikrina, ar name yra validus (bent 3 simbolių ilgio).
Jei tikrinimas nepavyksta, išmetama klaida.
handleSubmit funkcija atnaujinta taip, kad pagautų bet kokias klaidas, išmestas Serverio Veiksmo, ir parodytų klaidos pranešimą vartotojui.

Tikrinimo Bibliotekų Naudojimas

Sudėtingesniems tikrinimo scenarijams apsvarstykite galimybę naudoti tokias tikrinimo bibliotekas kaip:

Zod: TypeScript orientuota schemų deklaravimo ir tikrinimo biblioteka.
Yup: JavaScript schemų kūrimo įrankis, skirtas reikšmių analizavimui, tikrinimui ir transformavimui.

Štai pavyzdys naudojant Zod:

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

export const CreateItemSchema = z.object({
  name: z.string().min(3, 'Elemento pavadinimas turi būti bent 3 simbolių ilgio.'),
});

// 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 };
  }

  // Duomenų bazės sąveikos imitavimas
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Vėlavimo imitavimas

  console.log('Item created successfully!'); // Elementas sėkmingai sukurtas!
}

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 || 'Įvyko klaida.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Elemento pavadinimas:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paaiškinimas:

CreateItemSchema apibrėžia name lauko tikrinimo taisykles naudojant Zod.
safeParse metodas bando patikrinti įvesties duomenis. Jei tikrinimas nepavyksta, jis grąžina objektą su klaidomis.
errors objektas pateikia išsamią informaciją apie tikrinimo klaidas.

Saugumo Aspektai

Serverio Veiksmai padidina saugumą vykdydami kodą serveryje, tačiau vis tiek labai svarbu laikytis geriausių saugumo praktikų, kad apsaugotumėte savo programą nuo įprastų grėsmių.

Apsauga nuo Tarpvietinių Užklausų Klastojimo (CSRF)

CSRF atakos išnaudoja pasitikėjimą, kurį svetainė turi vartotojo naršyklėje. Norėdami išvengti CSRF atakų, įdiekite CSRF apsaugos mechanizmus.

Next.js automatiškai tvarko CSRF apsaugą, kai naudojami Serverio Veiksmai. Sistema generuoja ir patvirtina CSRF žetoną kiekvienam formos pateikimui, užtikrindama, kad užklausa kiltų iš jūsų programos.

Vartotojo Autentifikavimo ir Autorizavimo Tvarkymas

Užtikrinkite, kad tik autorizuoti vartotojai galėtų atlikti tam tikrus veiksmus. Įdiekite autentifikavimo ir autorizavimo mechanizmus, kad apsaugotumėte jautrius duomenis ir funkcionalumą.

Štai pavyzdys, kaip apsaugoti Serverio Veiksmą naudojant NextAuth.js:

// 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('Neautorizuota');
  }

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

  // Duomenų bazės sąveikos imitavimas
  console.log('Creating item:', name, 'by user:', session.user?.email);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Vėlavimo imitavimas

  console.log('Item created successfully!'); // Elementas sėkmingai sukurtas!
}

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 || 'Įvyko klaida.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Elemento pavadinimas:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paaiškinimas:

getServerSession funkcija gauna vartotojo sesijos informaciją.
Jei vartotojas nėra autentifikuotas (nėra sesijos), išmetama klaida, neleidžianti įvykdyti Serverio Veiksmo.

Įvesties Duomenų Valymas (Sanitizing)

Išvalykite įvesties duomenis, kad išvengtumėte Tarpvietinio Scenarijų Vykdymo (XSS) atakų. XSS atakos įvyksta, kai į svetainę įterpiamas kenkėjiškas kodas, galintis pakenkti vartotojo duomenims ar programos funkcionalumui.

Naudokite bibliotekas, tokias kaip DOMPurify ar sanitize-html, kad išvalytumėte vartotojo pateiktus duomenis prieš juos apdorojant Serverio Veiksmuose.

Pažangios Technikos

Dabar, kai aptarėme pagrindus, išnagrinėkime keletą pažangių technikų, kaip efektyviai naudoti Serverio Veiksmus.

Optimistiniai Atnaujinimai

Optimistiniai atnaujinimai suteikia geresnę vartotojo patirtį, nedelsiant atnaujinant vartotojo sąsają taip, lyg veiksmas būtų sėkmingas, dar prieš serveriui tai patvirtinant. Jei veiksmas serveryje nepavyksta, vartotojo sąsaja grąžinama į ankstesnę būseną.

// 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;

  // Duomenų bazės sąveikos imitavimas
  console.log('Updating item:', id, 'with name:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Vėlavimo imitavimas

  // Nesėkmės imitavimas (demonstraciniais tikslais)
  const shouldFail = Math.random() < 0.5;
  if (shouldFail) {
    throw new Error('Nepavyko atnaujinti elemento.');
  }

  console.log('Item updated successfully!'); // Elementas sėkmingai atnaujintas!
  return { name }; // Grąžiname atnaujintą pavadinimą
}

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);

    // Optimistiškai atnaujiname vartotojo sąsają
    const newName = formData.get('name') as string;
    setItemName(newName);

    try {
      const result = await updateItem(id, formData);
      // Sėkmės atveju atnaujinimas jau atsispindi sąsajoje per setItemName

    } catch (error: any) {
      setErrorMessage(error.message || 'Įvyko klaida.');
      // Klaidos atveju grąžiname sąsają į pradinę būseną
      setItemName(initialName);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Dabartinis pavadinimas: {itemName}
      
        Naujas elemento pavadinimas:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paaiškinimas:

Prieš iškviečiant Serverio Veiksmą, vartotojo sąsaja yra nedelsiant atnaujinama su nauju elemento pavadinimu naudojant setItemName.
Jei Serverio Veiksmas nepavyksta, vartotojo sąsaja yra grąžinama į pradinį elemento pavadinimą.

Duomenų Atnaujinimas (Revalidating)

Po to, kai Serverio Veiksmas pakeičia duomenis, gali prireikti atnaujinti talpykloje esančius duomenis, kad vartotojo sąsaja atspindėtų naujausius pakeitimus. Next.js siūlo kelis būdus, kaip atnaujinti duomenis:

Kelio Atnaujinimas (Revalidate Path): Atnaujinkite talpyklą konkrečiam keliui.
Žymos Atnaujinimas (Revalidate Tag): Atnaujinkite talpyklą duomenims, susietiems su konkrečia žyma.

Štai pavyzdys, kaip atnaujinti kelią po naujo elemento sukūrimo:

// 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;

  // Duomenų bazės sąveikos imitavimas
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Vėlavimo imitavimas

  console.log('Item created successfully!'); // Elementas sėkmingai sukurtas!

  revalidatePath('/items'); // Atnaujiname /items kelią
}

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 || 'Įvyko klaida.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Elemento pavadinimas:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Paaiškinimas:

revalidatePath('/items') funkcija panaikina talpyklos įrašą /items keliui, užtikrindama, kad kita užklausa į šį kelią gautų naujausius duomenis.

Geriausios Serverio Veiksmų Praktikos

Norėdami maksimaliai išnaudoti Serverio Veiksmų teikiamus privalumus, apsvarstykite šias geriausias praktikas:

Serverio Veiksmai turi būti maži ir tikslingi: Serverio Veiksmai turėtų atlikti vieną, aiškiai apibrėžtą užduotį. Venkite sudėtingos logikos Serverio Veiksmuose, kad išlaikytumėte skaitomumą ir testuojamumą.
Naudokite aprašomuosius pavadinimus: Suteikite savo Serverio Veiksmams aprašomuosius pavadinimus, kurie aiškiai nurodo jų paskirtį.
Tinkamai tvarkykite klaidas: Įdiekite patikimą klaidų tvarkymą, kad pateiktumėte informatyvų grįžtamąjį ryšį vartotojui ir išvengtumėte programos gedimų.
Kruopščiai tikrinkite duomenis: Atlikite išsamų duomenų tikrinimą, kad užtikrintumėte duomenų vientisumą ir išvengtumėte saugumo pažeidžiamumų.
Apsaugokite savo Serverio Veiksmus: Įdiekite autentifikavimo ir autorizavimo mechanizmus, kad apsaugotumėte jautrius duomenis ir funkcionalumą.
Optimizuokite našumą: Stebėkite savo Serverio Veiksmų našumą ir prireikus juos optimizuokite, kad užtikrintumėte greitą atsakymo laiką.
Efektyviai naudokite talpyklą (caching): Išnaudokite Next.js talpyklos mechanizmus, kad pagerintumėte našumą ir sumažintumėte duomenų bazės apkrovą.

Dažniausios Klaidos ir Kaip Jų Išvengti

Nors Serverio Veiksmai siūlo daug privalumų, yra keletas dažniausiai pasitaikančių klaidų, kurių reikėtų žinoti:

Per daug sudėtingi Serverio Veiksmai: Venkite talpinti per daug logikos į vieną Serverio Veiksmą. Suskaidykite sudėtingas užduotis į mažesnes, lengviau valdomas funkcijas.
Klaidų tvarkymo ignoravimas: Visada įtraukite klaidų tvarkymą, kad pagautumėte netikėtas klaidas ir pateiktumėte naudingą grįžtamąjį ryšį vartotojui.
Saugumo geriausių praktikų ignoravimas: Laikykitės saugumo geriausių praktikų, kad apsaugotumėte savo programą nuo įprastų grėsmių, tokių kaip XSS ir CSRF.
Pamiršimas atnaujinti duomenis: Įsitikinkite, kad atnaujinate talpykloje esančius duomenis po to, kai Serverio Veiksmas juos pakeičia, kad vartotojo sąsaja būtų visada aktuali.

Išvada

Next.js 14 Serverio Veiksmai suteikia galingą ir efektyvų būdą tvarkyti formų pateikimus ir duomenų mutacijas tiesiogiai serveryje. Laikydamiesi šiame vadove pateiktų geriausių praktikų, galite kurti patikimas, saugias ir našias interneto programas. Pasinaudokite Serverio Veiksmais, kad supaprastintumėte savo kodą, padidintumėte saugumą ir pagerintumėte bendrą vartotojo patirtį. Integruodami šiuos principus, apsvarstykite savo kūrimo sprendimų pasaulinį poveikį. Užtikrinkite, kad jūsų formos ir duomenų tvarkymo procesai būtų prieinami, saugūs ir patogūs įvairioms tarptautinėms auditorijoms. Šis įsipareigojimas įtraukumui ne tik pagerins jūsų programos naudojimą, bet ir praplės jos pasiekiamumą bei efektyvumą pasauliniu mastu.