Hloubkové porozumění serverovým akcím a manipulaci s daty v Next.js 14

Funkce Server Actions v Next.js 14 představuje významný vývoj v přístupu k operacím se serverovými daty. Umožňuje vývojářům přímo v serverových komponentách definovat asynchronní funkce určené k zpracování akcí, jako je odeslání formulářů nebo změny dat, bez nutnosti vytvářet samostatné API směrování. Tento přístup výrazně zjednodušuje tok dat, zvyšuje efektivitu vývoje a zlepšuje bezpečnost aplikace.

Co jsou Server Actions?

Server Actions jsou v Next.js funkce, které se spouštějí na straně serveru. Lze je definovat přímo v reakčních komponentách a spouštět je pomocí formulářů nebo událostí. Jejich hlavní výhodou je, že logika provedení probíhá výhradně na straně serveru, přičemž klient je zodpovědný pouze za odesílání požadavků a přijímání odpovědí. Tím se přirozeně zabrání vystavení citlivé logiky a přístupových klíčů klientovi.

Dodáním na začátek souboru s komponentou… ‘server-only’ Použito uvnitř instrukcí nebo funkcí ‘use server’ Příkazy umožňují jednoznačně označit funkce jako serverové operace. Díky tomu mohou vývojáři bezproblémově psát serverovou logiku v komponentách, například provádět bezpečnou interakci přímo s databází.

Doporučujeme k přečtení. Analýza celého procesu výstavby webových stránek: Technické postupy a klíčové body od plánování po jejich spuštění。

Typická struktura Server Action funguje následovně: běží přímo v kontextu serveru a má přístup ke všem serverovým zdrojům.

Nástroj pro tvorbu webových stránek WordPress.com.

Dostupnost 99,9991 TP4T + přeshraniční zotavení po havárii, podpora 24 hodin denně, bezplatné používání AI pro tvorbu webových stránek při zakoupení balíčku blogů.

Název domény zdarma na jeden rok

Přejděte na web WordPress.com a využijte asistenta pro tvorbu webových stránek →

Nástroj pro tvorbu webových stránek UltaHost.

Více než 900 bezplatných, přizpůsobitelných šablon, které poskytují SEO schopnosti potřebné k optimalizaci viditelnosti webových stránek ve vyhledávání.

Nabídka 40%

Navštivte webovou stránku UltaHost pro pomoc při tvorbě webu →

// app/actions/todo.ts
‘use server‘;

import { revalidatePath } from ‘next/cache‘;
import { db } from ‘@/lib/database‘;

export async function createTodo(formData: FormData) {
  const title = formData.get(‘title‘) as string;
  // 在服务器端安全地执行数据库操作
  await db.todo.create({ data: { title, completed: false } });
  // 操作成功后，使特定路径的缓存失效以更新数据
  revalidatePath(‘/dashboard‘);
}

Design philosophy and working principles

Designová filozofie Server Actions spočívá v “návratu serverové logiky zpět ke komponentám”. V tradičních aplikacích vybudovaných pomocí Next.js obvykle vyžaduje změna dat nejprve definování určitého prvku (komponenty), který se nachází na straně serveru. pages/api/ API směry nacházející se v adresáři následně použijte v klientovských komponentách. fetch Požadavek je odeslán. Toto oddělení zvyšuje složitost architektury.

Server Actions jsou zavedeny prostřednictvím… ‘use server’ Příkaz: Při kompilaci označte tyto funkce tak, aby mohly být vykonávány pouze na straně serveru. Když klient volá tyto funkce, Next.js prostřednictvím bezpečného, automaticky generovaného RPC (dálkového volání procedur) přístupu zprostředkuje požadavek, odešle serializované parametry na server, funkce provede a poté výsledek serializuje a vrátí zpět klientovi. Celý proces je pro vývojáře transparentní – působí to, jako by se volala lokální funkce.

Jak definovat a používat Server Actions?

Existují dvě hlavní způsoby definování a použití serverových akcí (Server Actions): interní definice a modulární definice. Každý z těchto způsobů je vhodný pro různé scénáře, ale společným požadavkem je použití určitých nástrojů nebo postupů při jejich vytváření. ‘use server’ Příkazy potřebují jasné specifikace ohledně svého prostředí provádění.

Způsob vnitřní definice

Můžete to provést přímo uvnitř serverového komponentu, na začátku těla funkce. ‘use server’ Příkazy slouží k vytvoření vložených serverových akcí (Server Actions). Tento přístup je vhodný pro operace s jednoduchou logikou a nízkou možností opakovaného použití, což pomáhá udržet související kód na jednom místě.

Doporučujeme k přečtení. Průvodce celým procesem výstavby webových stránek: Kompletní praktický postup od nuly až k dokončení včetně analýzy klíčových technologií。

// app/page.tsx (一个服务器组件)
export default function ServerPage() {
  async function handleLogin(formData: FormData) {
    ‘use server‘;
    const email = formData.get(‘email‘);
    const password = formData.get(‘password‘);
    // 在此处进行身份验证逻辑
    // ...
  }

return (
    <form action={handleLogin}>
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button type="submit">登录</button>
    </form>
  );
}

Je důležité si uvědomit, že pro dosažení nejlepší typové bezpečnosti a optimalizace procesu „Tree-shaking“ doporučuje oficiální dokumentace Next.js použití modulárního způsobu definování kódu.

Modulární způsob definice

Pro složitější logiku nebo logiku, která se musí vícekrát použít, doporučujeme definovat Server Actions v samostatných modulových souborech. app/actions/ V adresáři. To pomáhá udržovat kód modulární a udržovatelný a usnadňuje provádění jednotkových testů.

Nejprve definujte a exportujte své akce do samostatného souboru:

Nástroj pro tvorbu webových stránek Bluehost

Nabízí nástroje pro tvorbu webových stránek s umělou inteligencí, online chat a telefonickou podporu 24 hodin denně, 7 dní v týdnu, bezplatnou doménu na rok, bezplatnou CDN a dohodu o úrovni služeb (SLA) s dobou provozu na 99,991 %

Navštivte Bluehost.

// app/actions/user.ts
‘use server‘;

import { z } from ‘zod‘;
import { db } from ‘@/lib/db‘;
import { revalidateTag } from ‘next/cache‘;

const UserSchema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
});

export async function createUser(prevState: any, formData: FormData) {
  const validatedFields = UserSchema.safeParse({
    name: formData.get(‘name‘),
    email: formData.get(‘email‘),
  });

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

await db.user.create({ data: validatedFields.data });
  revalidateTag(‘user-list‘); // 使用标签重新验证缓存
  return { message: ‘用户创建成功！‘ };
}

Poté to importujte a použijte v klientovských nebo serverovských komponentách. V klientovských komponentách je to nutné kombinovat s Reactem. useActionState Počkejte, až přijde Hook, který bude spravovat stav.

// app/components/CreateUserForm.tsx
‘use client‘;

import { createUser } from ‘@/app/actions/user‘;
import { useActionState } from ‘react‘;

export function CreateUserForm() {
  const [state, formAction, isPending] = useActionState(createUser, null);

return (
    <form action="/cs/formAction/" data-trp-original-action="{formAction}">
      <div>
        <label htmlfor="name">Jméno</label>
        <input id="name" name="name" />
        {state?.errors?.name && <span>{state.errors.name}</span>}
      </div>
      <div>
        <label htmlfor="email">E-mailová adresa</label>
        <input id="email" name="email" type="email" />
        {state?.errors?.email && <span>{state.errors.email}</span>}
      </div>
      <button type="submit" disabled="{isPending}">
        {isPending ? ‘Vytváří se…‘ : ‘Vytváří se uživatel‘}
      </button>
      {state?.message && <p>{state.message}</p>}
    <input type="hidden" name="trp-form-language" value="cs"/></form>
  );
}

Klíčové výhody a praktické aplikace Server Actions

Zavedení funkcí typu „Server Actions“ vyřešilo řadu klíčových problémů při vývoji full-stack aplikací a vedlo k výraznému zlepšení jak z hlediska bezpečnosti, tak i z hlediska uživatelského zážitku při vývoji.

Zjednodušený datový tok a typová bezpečnost od začátku do konce

Tradiční “API routing +“ fetch”Tento „režim“ umožňuje přepínání kontextů a vytváření „typových breakpointů“ (přerušení vývojového procesu v případě nesplnění typových požadavků). Funkce typu Server Actions vám umožňují považovat serverové funkce za moduly, které můžete importovat do svého kódu. V kombinaci s jazykem TypeScript lze tak dosáhnout celkové typové bezpečnosti od struktury databáze až po přední stránky aplikace. V funkcích Server Actions můžete definovat parametry pomocí formátů typu Zod nebo podobných schémat, což na straně klienta zajišťuje přesné tipy ohledně typů a automatickou validaci dat, čímž se výrazně snižuje počet chyb během provozu aplikace.

Doporučujeme k přečtení. Proč si vybrat Tailwind CSS: podrobné vysvětlení jeho hlavních výhod a osvědčených postupů.。

Vylepšená bezpečnost a vestavěná ochrana

Server Actions jsou ve výchozím nastavení chráněny řadou bezpečnostních opatření. Next.js automaticky aplikuje tyto bezpečnostní funkce na všechny serverové akce, které jsou používány. POST Metoda Server Actions zajišťuje ochranu proti podvodu při přeshraničních požadavcích (Cross-Site Request Forgery – CSRF) prostřednictvím kontroly… Origin 和 Host Nejprve se ověří zdroj požadavku. Ještě důležitější je, že protože obchodní logika (jako jsou dotazy do databází nebo volání třetích stran) probíhá na serveru, citlivé proměnné prostředí a klíče API nikdy neuniknou do balíčků určených k distribuci na klienty.

Efektivní mechanismus opakované ověřky mezipaměti (cache revalidation)

Server Actions jsou hluboce integrovány s systémem cacheování Next.js. Po změně dat můžete použít… revalidatePath 或 revalidateTag Funkce umožňuje přesně zneplatnit („vynulovat“) datové zásoby (cache) určené konkrétní cestě nebo obsahující specifické značky („tagy“). To znamená, že po dokončení akce vytvoření blogového článku můžete okamžitě obnovit obsah stránky se seznamem článků, čímž zajistíte, že uživatelé uvidí nejnovější informace, aniž by museli čekat na cyklus generování aktualizovaných statických stránek („Incremental Static ReGeneration“ – ISR).

hosting.com

Bezplatný SSL, Cloudflare CDN, WAF, více než 40 datových center po celém světě, nižší latence v blízkosti, podpora služeb 24/7/365, nyní můžete ušetřit až 671 TB dat a podpora konfigurace AI a optimalizace SEO.

Navštivte hosting.com.

‘use server‘;
import { revalidatePath, revalidateTag } from ‘next/cache‘;

export async function updatePost(id: string, content: string) {
  await db.post.update({ where: { id }, data: { content } });
  // 方式一：重新验证特定路径
  revalidatePath(`/posts/${id}`);
  // 方式二：重新验证所有带有该标签的缓存数据
  revalidateTag(‘posts‘);
}

Postupné vylepšování a optimalizace uživatelského zážitku

I v případě, že na straně klienta dojde k selhání načítání JavaScriptu nebo je jeho použití zcela zakázáno, lze stále používat… action HTML formuláře, jejichž atributy odkazují na „Server Action“, stále fungují správně, což splňuje základní požadavky na postupné vylepšování („progressive enhancement“). V moderních prohlížečích můžete tuto funkčnost využít. useFormStatus、useOptimistic Počkejme, až React Hooky poskytnou skvělý uživatelský zážitek – například zobrazení stavu načítání při čekání na odpověď serveru nebo provádění optimistických aktualizací.

‘use client‘;
import { experimental_useOptimistic as useOptimistic } from ‘react‘;
import { sendMessage } from ‘./actions‘;

function Thread({ messages }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [...state, { text: newMessage, sending: true }]
  );

async function formAction(formData) {
    const message = formData.get(‘message‘);
    addOptimisticMessage(message); // 立即乐观更新UI
    await sendMessage(message); // 调用 Server Action
  }

return (
    <>
      {optimisticMessages.map((msg, idx) =&gt; (
        <div key="{idx}">{msg.text} {msg.sending &amp;&amp; ‘(Odesíláno…)‘}</div>
      ))}
      <form action="/cs/formAction/" data-trp-original-action="{formAction}">...<input type="hidden" name="trp-form-language" value="cs"/></form>
    </>
  );
}

Závěr

Server Actions v Next.js 14 představují revoluční vlastnost, která významně zjednodušuje komplexitu celostopného vývoje tím, že integruje serverovou logiku do UI komponent více úzce a deklarativně. Nejde pouze o náhradu za běžné API směrování, ale také o nový, bezpečnější, efektivnější a pro vývojáře přívětivější přístup k manipulaci s daty. Díky zjednodušeným datovým tokům, silným výchozím bezpečnostním nastavením, detailnímu řízení cache a podpoře pro postupné vylepšování aplikace výrazně zlepšují zážitek a kvalitu při vývoji moderních webových aplikací. Ovládnutí a správné využití této funkce je klíčové pro vytváření aplikací v Next.js s vysokým výkonem a snadnou údržbou.

Časté dotazy

Lze v klientovských komponentách přímo definovat Server Action?

Není to možné.‘use server’ Tyto instrukce lze použít pouze v modulech v serverovém prostředí. V místech označených jako… ‘use client’ Přímo definování Server Action v souborech klientovských komponent může způsobit chyby při sestavování aplikace. Správný postup je definovat Server Actions v samostatných modulových souborech nebo v samotných serverovských komponentech a poté je importovat a volat z klientovských komponent.

Omezuje se Server Actions pouze na zpracování dat z formulářů?

Ne. Ačkoli je odeslání formuláře nejčastějším případem použití Server Actions (přes…) FormData Tyto funkce přijímají jako parametry objekty, ale mohou přijmout jakékoli serializovatelné hodnoty – včetně řetězců, čísel, logických hodnot, polí a běžných objektů. Můžete je volat stejným způsobem jako běžné asynchronní funkce a předat potřebné parametry.

Jak nakládat s chybami během provádění Server Actions?

Měl byste to použít uvnitř funkce Server Action. try...catch Bloky slouží k zachycení a zpracování chyb. Následně lze klienta informovat vrácením objektu obsahujícího informace o chybě. Na straně klienta lze tyto informace využít k odpovídajícímu jednání. useActionState Závisí na stavu vráceném metodou `Hook`, jak budou zobrazeny chybové informace. Ujistěte se, že citlivé servisové chybové záznamy (stacky) nejsou přímo vraceny klientovi, ale místo toho se zobrazí uživatelsky přívětivé chybové zprávy.

Bude použití Server Actions ovlivňovat výkon mé aplikace?

Při správném použití pomáhají Server Actions obvykle zlepšit dojem o výkonu aplikace. Zmenšují velikost klientovského JavaScriptového balíčku, protože logika je prováděna na serveru. Díky tomu je aplikace rychlejší a efektivnější. revalidatePath 或 revalidateTag Volání těchto funkcí může zabránit zbytečnému přečtení celé stránky. Je však důležité věnovat pozornost efektivitě jejich provádění a vyhnout se situacím, kdy dlouhodobě probíhající synchronní operace blokují požadavky. Pro časově náročné úkoly by mělo být zváženo použití asynchronních front k jejich zpracování. Kromě toho časté volání malých serverových akcí (Server Actions) může zvýšit počet síťových přenosů; v takových případech je třeba zvážit, zda je vhodné použít správu stavu na straně klienta.