Een grondig begrip van Server Actions en data-operaties in Next.js 14.

De Server Actions-functie in Next.js 14 markeert een grote ontwikkeling in de manier van serverzijde-dataverwerking. Het biedt ontwikkelaars de mogelijkheid om asynchrone functies rechtstreeks in servercomponenten te definiëren, waarmee ze acties kunnen uitvoeren als het indienen van formulieren of het bewerken van data, zonder dat er aparte API-routes hoeven te worden gecreëerd. Dit versimpelt de datastroom aanzienlijk, verbetert de ontwikkelingsefficiëntie en verhoogt de beveiliging van de toepassing.

Wat zijn Server Actions?

Server Actions zijn in Next.js functies die op de serverkant worden uitgevoerd. Ze kunnen rechtstreeks in React-componenten worden gedefinieerd en worden geactiveerd via formulieren of evenementen. Het belangrijkste voordeel is dat de uitvoer van de logica geheel op de serverkant plaatsvindt; de client is alleen verantwoordelijk voor het sturen van verzoeken en het ontvangen van antwoord. Dit voorkomt dat gevoelige informatie of toegangsgegevens op de clientkant worden blootgesteld.

Door dit te doen aan het begin van het componentbestand… ‘server-only’ Gebruikt binnen een instructie of functie ‘use server’ De instructies maken het mogelijk om functies duidelijk als serverkantelijke operaties te markeren. Dit geeft ontwikkelaars de mogelijkheid om serverlogica moeiteloos in componenten te integreren, bijvoorbeeld om veilig te interageren met een database.

Aanbevolen leesmateriaal Analyse van het hele proces van websiteontwerp: van planning tot livegoeding – technische praktijken en belangrijke punten。

Een typisch Server Action-bestand werkt rechtstreeks in het serveromgeving en heeft toegang tot alle serverbronnen.

De websitebouwer van WordPress.com

99.999% beschikbaarheid + disaster recovery tussen regio's, 24-uurs ondersteuning, gratis gebruik van A.I. bij het bouwen van websites bij aankoop van een blogpakket.

Gratis domeinnaam voor één jaar

Ga naar de website van WordPress.com voor hulp bij het bouwen van een website →

De websitebouwassistent van UltaHost.

Meer dan 900 gratis, aanpasbare sjablonen met de SEO-functionaliteit die nodig is om de zichtbaarheid van websites in zoekmachines te optimaliseren.

Aanbieding 40%

Ga naar de website van UltaHost voor hulp bij het bouwen van een website →

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

Designfilosofie en werking principe

De filosofie van Server Actions is om de serverlogica terug te brengen naar de componenten. In traditionele Next.js-apps moet een verandering in de data eerst worden gedefinieerd op een bepaalde plek in de code. pages/api/ De API-routes die zich in de map bevinden, worden vervolgens gebruikt in de client-componenten. fetch Een verzoek wordt gestart. De scheiding tussen deze onderdelen zorgt voor meer complexiteit in de architectuur.

Server Actions worden geïntroduceerd door… ‘use server’ De instructie is om deze functies tijdens de compilatie te markeren als alleen uitvoerbaar op de serverkant. Wanneer de client deze functies oproept, zal Next.js de request via een veilige, automatisch genereerde RPC (Remote Procedure Call)-punt verzenden. De parameter wordt geserialiseerd en naar de server gestuurd, de functie wordt uitgevoerd, en het resultaat wordt vervolgens geserialiseerd en teruggegeven aan de client. Het hele proces is voor de ontwikkelaar transparant; het voelt alsof de lokale functie rechtstreeks wordt opgeroepen.

Hoe definieer je en gebruik je Server Actions?

Er zijn twee principiele manieren om Server Actions te definiëren en te gebruiken: in-line-definieeringen en modulaire definieeringen. Elke methode is geschikt voor verschillende situaties, maar ze hebben allebei één ding met elkaar gemeen: je moet ze gebruiken. ‘use server’ Deze instructie is bedoeld om de uitvoeromgeving duidelijk te maken.

In-line definitie

Je kunt dit rechtstreeks bovenin het lichaam van de functie doen, binnen de servercomponent. ‘use server’ Instrukties voor het maken van in-line Server Actions. Dit is handig voor operaties met eenvoudige logica en weinig hergebruik, waardoor de betreffende code op één plek kan worden gehouden.

Aanbevolen leesmateriaal Een volledige gids voor het bouwen van moderne websites: van nul tot één, met een volledige uitleg van de praktijk en de kerntechnologieën.。

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

Het is belangrijk om te weten dat Next.js officieel het gebruik van een modulaire definitiemethode aanbeveelt voor optimale typeveiligheid en Tree-shaking.

Modulaire definitiemethoden

Voor complexere logische processen of situaties waarbij dezelfde logische stappen op meerdere plaatsen worden gebruikt, is het aan te raden om Server Actions in aparte modulebestanden te definiëren. app/actions/ De code is opgeslagen in een map (directory). Dit bevordert de modulariteit en onderhoudbaarheid van de code, en maakt het ook gemakkelijk om unittests uit te voeren.

Eerst moet je je acties in een aparte bestand definiëren en deze vervolgens exporteren:

De Bluehost-websitebouwer

Het aanbieden van tools voor het maken van websites met A.I., 24/7 online chat- en telefonische ondersteuning, een gratis domeinnaam voor een jaar, gratis CDN en een uptime SLA van 99,991%

Bezoek 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: ‘用户创建成功！‘ };
}

Vervolgens wordt het importeerd en gebruikt in de client- of servercomponenten. In de clientcomponenten moet dit worden gecombineerd met React. useActionState Wacht op de Hook om de status te beheren.

// 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="/nl/formAction/" data-trp-original-action="{formAction}">
      <div>
        <label htmlfor="name">Naam</label>
        <input id="name" name="name" />
        {state?.errors?.name && <span>{state.errors.name}</span>}
      </div>
      <div>
        <label htmlfor="email">E-mailadres</label>
        <input id="email" name="email" type="email" />
        {state?.errors?.email && <span>{state.errors.email}</span>}
      </div>
      <button type="submit" disabled="{isPending}">
        {isPending ? ‘Wordt gecreëerd…‘ : ‘Gebruiker wordt gecreëerd‘}
      </button>
      {state?.message && <p>{state.message}</p>}
    <input type="hidden" name="trp-form-language" value="nl"/></form>
  );
}

De belangrijkste voordelen en praktische toepassingen van Server Actions

De introductie van Server Actions heeft meerdere belangrijke problemen in het ontwikkelen van full-stack-applicaties opgelost, waardoor zowel de veiligheid als de ontwikkelingservaring significant zijn verbeterd.

Simplificerde datastromen en end-to-end typeveiligheid

De traditionele benadering van “API-routes +’ fetch”De ‘mode’ bevat mogelijkheden voor het wisselen van context en het instellen van type-punten (type breakpoints). Server Actions biedt de mogelijkheid om serverfuncties te importeren als modules, en in combinatie met TypeScript kan dit een eenduidige, typebeveiligde omgeving van het database-schema naar de front-end-vormulieren realiseren. Je kunt in de actiefieën (action functions) de invoerparameters specificeren met Zod of een vergelijkbare schimaan (schema), waardoor op de client kant nauwkeurige type-informaties en validatie worden weergegeven. Dit vermindert de kans op fouten tijdens het uitvoeren van het programma aanzienlijk.

Aanbevolen leesmateriaal Waarom je voor Tailwind CSS zou kiezen: een gedetailleerde uitleg van de belangrijkste voordelen en best practices.。

Versterkt veiligheidsniveau en ingebouwde bescherming

Serveractions zijn standaard beschermd tegen verschillende veiligheidsrisico's. Next.js zorgt automatisch voor deze bescherming voor alle serveractions die worden gebruikt. POST De Server Actions van de methode bieden bescherming tegen cross-site request forgery (CSRF) door onderzoek te verrichten. Origin 和 Host Eerst wordt de oorsprong van de request geverifieerd. Wat nog belangrijker is: omdat de bedrijfslogica (zoals database-opvragen en oproepen naar derde-partijdiensten) op de server wordt uitgevoerd, komen gevoelige omgevingsvariabelen en API-sleutels nooit in het client-pakket terecht.

Een efficiënte cache-verificatie-mechanisme

Server Actions zijn diep geïntegreerd met het cachesysteem van Next.js. Nadat de data is veranderd, kun je hier gebruik van maken… revalidatePath 或 revalidateTag De functie zorgt ervoor dat de opgeslagen gegevens (cache) voor een specifieke path of met een specifiek label ongeldig worden gemaakt. Dit betekent dat nadat je een blogartikel hebt gecreëerd, je de cache van de artikelenlijstpagina direct kunt opnieuw laden, zodat de gebruiker de meest recente gegevens ziet, zonder te hoeven wachten op de volgende generatie van statische inhoud (ISR – Incremental Static Reproduction).

hosting.com

Gratis SSL, Cloudflare CDN, WAF, 40+ wereldwijde datacenters om uit te kiezen, lagere latentie dankzij een locatie dichterbij, 24/7/365 serviceondersteuning. Je bespaart nu tot wel 671 TP4T, en ondersteuning voor A.I.-ontwikkeling en SEO-optimalisatie is inbegrepen.

Ga naar 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‘);
}

Progressieve verbetering en optimalisatie van de gebruikerservaring

Zelfs als het laden van JavaScript op de clientkant niet lukt of wanneer JavaScript helemaal is uitgeschakeld, kan het nog worden gebruikt. action HTML-formulieren waarbij de attributen naar een Server Action verwijzen, werken nog steeds zoals verwacht. Dit voldoet aan de basisvereisten voor progressieve verbeteringen (‘progressive enhancement’). In moderne browsers kun je hier gebruik van maken. useFormStatus、useOptimistic Wacht op React Hooks om een uitstekende gebruikerservaring te bieden, bijvoorbeeld door een laadstatus aan te tonen terwijl je op een serverrespons wacht, of door optimistische updates uit te voeren.

‘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; ‘(Verstuurd…)‘}</div>
      ))}
      <form action="/nl/formAction/" data-trp-original-action="{formAction}">...<input type="hidden" name="trp-form-language" value="nl"/></form>
    </>
  );
}

Samenvatting

Server Actions in Next.js 14 is een revolutionair feature dat de complexiteit van full-stack development aanzienlijk vermindert door de serverlogica nauwer en declaratiever te integreren in UI-componenten. Het is niet alleen een alternatief voor API-routes, maar vertegenwoordigt ook een veiliger, efficiënter en developer-vriendelijker paradigma voor het bewerken van data. Server Actions biedt een vereenvoudigde datastroom, sterke standaardbeveiliging, gedetailleerde controle over het cacheren en ondersteuning voor progressieve verbeteringen, waardoor de ervaring en kwaliteit bij het bouwen van moderne webapplicaties enorm verbeteren. Het is essentieel om deze feature goed te beheersen en te gebruiken om de volgende generatie Next.js-applicaties te bouwen die hoogpresterend en gemakkelijk te onderhouden zijn.

Veelgestelde vragen (FAQ)

Kan je in een client-side-component direct een Server Action definiëren?

Nee, dat is niet mogelijk.‘use server’ Deze instructie kan alleen worden gebruikt in modules die zich in een serveromgeving bevinden. In de gemarkeerde secties… ‘use client’ Als je een Server Action rechtstreeks definieert in het bestand van de client-component, kan dit leiden tot bouwproblemen. Het is correcter om Server Actions in een aparte modulefile of server-component te definiëren, en deze vervolgens in de client-component te importeren en op te roepen.

Beperken Server Actions zich alleen tot het verwerken van formuliergegevens?

Nee. Hoewel het indienen van formulieren de meest voorkomende toepassing van Server Actions is (via…) FormData Deze objecten kunnen alle serialeerbare parameters accepteren, zoals strings, cijfers, booleewaarden, arrays en gewone objecten. Je kunt ze op dezelfde manier oproepen als een gewone asynchrone functie en de vereiste parameters overdragen.

Hoe moet je omgaan met fouten die optreden tijdens het uitvoeren van Server Actions?

Je moet dit gebruiken binnen de Server Action-functie. try...catch De fouten worden opgevangen en verwerkt op de server. Vervolgens kan de client worden geïnformeerd door een object terug te sturen dat de foutinformatie bevat. Op de client kan deze informatie worden gebruikt. useActionState De status die wordt teruggegeven door Hook wordt gebruikt om foutmeldingen weergeven. Zorg ervoor dat gevoelige serverfouten niet rechtstreeks naar de client worden gestuurd, maar dat in plaats daarvan gebruikersvriendelijke foutmeldingen worden teruggegeven.

Zal het gebruik van Server Actions de prestaties van mijn app beïnvloeden?

Als ze worden gebruikt op de juiste manier, kunnen Server Actions de prestaties verbeteren. Ze verkleinen de grootte van de JavaScript-pakketten op de client, omdat de logische verwerking op de server wordt uitgevoerd. Dit zorgt voor een snellere en efficiëntere werking van de website. revalidatePath 或 revalidateTag Het oproepen van serveractions kan onnodige herlaadingen van de hele pagina voorkomen. Er moet echter worden gelet op de uitvoeringsefficiëntie van de betreffende functies, om te voorkomen dat langzaam uitvoerende, synchrone operaties de verwerking van verzoeken belemmeren. Voor tijdrovende taken zou het gebruik van een asynchrone queue een goede optie zijn. Daarnaast kunnen frequente oproepen van kleine serveractions het aantal netwerkverkeersverkeer verhogen; in deze gevallen moet worden bepaald of het gebruik van client-side statusbeheer een geschikte oplossing is.