React Academy · Lekcja

Server Actions do mutacji danych

Definiowanie funkcji 'use server' do obsługi mutacji formularzy i unieważniania cache za pomocą revalidatePath.

Server Actions do mutacji danych to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym są Server Actions?

Server Actions to funkcje asynchroniczne oznaczone przez 'use server', które działają wyłącznie na serwerze. Umożliwiają wysyłanie formularzy i mutowanie danych bez pisania handlerów tras API.

Definiowanie Server Action

Dodaj 'use server' na początku funkcji (lub pliku), aby utworzyć Server Action. Można ją definiować wyłącznie w Server Components albo w dedykowanych plikach actions.ts.

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

Używanie akcji w formularzach

Przekaż funkcję akcji do właściwości action formularza. Nie trzeba używać onSubmit ani handlera zdarzeń — Next.js serializuje formularz i wywołuje akcję po stronie serwera.

import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <button type="submit">Create</button>
    </form>
  );
}

Hook useActionState

useActionState (React 19) opakowuje akcję, aby śledzić stan oczekiwania i odbierać wartość zwracaną przez akcję w komponencie.

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

const initialState = { error: null };

export function PostForm() {
  const [state, action, isPending] = useActionState(createPost, initialState);
  return (
    <form action={action}>
      {state.error && <p className="error">{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>{isPending ? 'Creating...' : 'Create'}</button>
    </form>
  );
}

Zwracanie błędów walidacji

Zwróć z akcji obiekt zamiast rzucać wyjątek, aby przekazać błędy walidacji z powrotem do formularza za pośrednictwem useActionState.

export async function createPost(prevState: any, formData: FormData) {
  'use server';
  const title = formData.get('title') as string;
  if (!title || title.length < 3) {
    return { error: 'Title must be at least 3 characters' };
  }
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

Server Actions w handlerach zdarzeń

Wywołuj Server Actions z handlerów zdarzeń Client Componentów, a nie tylko jako akcje formularzy, importując je i wywołując bezpośrednio.

'use client';
import { deletePost } from './actions';

export function DeleteButton({ id }: { id: string }) {
  return (
    <button onClick={() => deletePost(id)}>
      Delete
    </button>
  );
}

Wbudowane Server Actions

Definiuj Server Actions bezpośrednio w Server Componentach za pomocą funkcji zawierającej wewnątrz 'use server' — jest to przydatne w przypadku logiki mutacji umieszczonej obok komponentu.

export default function PostPage({ post }) {
  async function updatePost(formData: FormData) {
    'use server';
    await db.post.update({ where: { id: post.id }, data: { title: formData.get('title') as string } });
    revalidatePath(`/blog/${post.id}`);
  }

  return (
    <form action={updatePost}>
      <input name="title" defaultValue={post.title} />
      <button type="submit">Save</button>
    </form>
  );
}

useOptimistic z Server Actions

Połącz useOptimistic z Server Actions, aby natychmiast aktualizować interfejs podczas wykonywania akcji w tle.

'use client';
import { useOptimistic } from 'react';
import { addItem } from './actions';

export function TodoList({ items }) {
  const [optimisticItems, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]);
  return (
    <form action={async (formData) => {
      addOptimistic({ id: 'temp', text: formData.get('text') });
      await addItem(formData);
    }}>
      <ul>{optimisticItems.map(i => <li key={i.id}>{i.text}</li>)}</ul>
      <input name="text" /><button>Add</button>
    </form>
  );
}

Kwestie bezpieczeństwa

Server Actions są wewnętrznie endpointami POST. Zawsze sprawdzaj poprawność i oczyszczaj dane wejściowe po stronie serwera, weryfikuj uwierzytelnienie i stosuj ochronę CSRF (Next.js obsługuje ją automatycznie dla żądań z tego samego originu).

Rewalidacja po mutacjach

Wywołaj revalidatePath() lub revalidateTag() po mutacji, aby wyczyścić odpowiednie cache i sprawić, że przy następnym wczytaniu strony będzie widoczna zmiana.

Szybki test

Jak przekazać Server Action do formularza w Next.js App Router?

Podsumowanie

Server Actions to asynchroniczne funkcje 'use server' obsługujące mutacje po stronie serwera. Łącz je z formularzami za pomocą właściwości action, śledź ich stan przez useActionState, zwracaj błędy zamiast rzucać wyjątki podczas walidacji i rewaliduj cache po mutacjach.

Często zadawane pytania

Czy lekcja „Server Actions do mutacji danych” jest bezpłatna?

Tak — pełny tekst „Server Actions do mutacji danych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Server Actions do mutacji danych”?

Definiowanie funkcji 'use server' do obsługi mutacji formularzy i unieważniania cache za pomocą revalidatePath. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Server Actions do mutacji danych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do React Academy