Next.js 15 fullstack (App Router + Server Actions) · leksjon

Optimistiske UI-oppdateringer

Implementer optimistiske UI-mønstre med Server Actions for å gi brukerne umiddelbar tilbakemelding før serveren bekrefter handlingen.

Leksjon 1 av 311 trinn

Optimistiske UI-oppdateringer er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 1 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.

Umiddelbar tilbakemelding med Optimistic UI

Se for deg at du klikker på «Lik» på et innlegg. Oppdateres det umiddelbart, eller må du vente på en spinner?

Optimistic UI er en teknikk der brukergrensesnittet oppdateres umiddelbart etter en handling, *før* serveren bekrefter den. Dette gir brukeren umiddelbar tilbakemelding og får appen til å føles mye raskere og mer responsiv.

Slik fungerer Optimistic UI

Prosessen er enkel:

Brukerhandling: Brukeren utfører en handling (for eksempel sender inn et skjema).
Umiddelbar oppdatering av brukergrensesnittet: Brukergrensesnittet oppdateres umiddelbart for å gjenspeile det *forventede* resultatet.
Serverhandling: I bakgrunnen sendes en forespørsel til serveren (for eksempel en Next.js Server Action) for å utføre den faktiske operasjonen.
Avstemming: Hvis serverhandlingen lykkes, forblir brukergrensesnittet uendret. Hvis den mislykkes, tilbakestilles brukergrensesnittet til den forrige tilstanden.

Dette gir en jevn og uavbrutt brukeropplevelse.

Next.js 15 og useOptimistic

Next.js 15, som bygger på React, tilbyr hooken useOptimistic, som gjør det enkelt å implementere optimistiske oppdateringer av brukergrensesnittet.

Denne hooken er spesielt utviklet for å håndtere en midlertidig, forventet tilstand som foregriper resultatet av en asynkron operasjon (for eksempel en Server Action) før det endelige svaret fra serveren mottas.

Forstå syntaksen til useOptimistic

Hooken useOptimistic har en enkel signatur:

const [optimisticState, addOptimistic] = useOptimistic(state, updater);

state: Den faktiske, autoritative tilstanden (for eksempel data som er hentet fra serveren).
updater: En funksjon som tar den gjeldende tilstanden og en nyttelast, og returnerer den nye optimistiske tilstanden.
optimisticState: Tilstanden som brukergrensesnittet skal vise for øyeblikket. Den vil enten være den faktiske state-tilstanden eller den optimistisk oppdaterte tilstanden.
addOptimistic: En funksjon du kaller med en nyttelast for å utløse en optimistisk oppdatering.

Kodedemonstrasjon: Enkel oppgaveliste

La oss begynne med en enkel klientkomponent som administrerer en liste over oppgaver ved hjelp av standard React-useState. Kjør dette for å se hvordan det fungerer på vanlig måte.

'use client';

import { useState } from 'react';

export default function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Plan lesson' },
    { id: 2, text: 'Review code' }
  ]);
  const [input, setInput] = useState('');

  const handleAddTask = () => {
    if (input.trim() === '') return;
    const newTask = { id: Date.now(), text: input };
    setTasks((prev) => [...prev, newTask]);
    setInput('');
  };

  return (
    <div>
      <h3>My Daily Tasks</h3>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add new task..."
      />
      <button onClick={handleAddTask}>Add Task</button>
    </div>
  );
}

Kodedemonstrasjon: Legge til optimistiske oppdateringer

La oss nå forbedre oppgavelisten med useOptimistic. Når du legger til en oppgave, vises den umiddelbart med etiketten « (pending...)», selv før den simulerte serverhandlingen er fullført.

'use client';

import { useState, useOptimistic } from 'react';

export default function OptimisticTaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Plan lesson' },
    { id: 2, text: 'Review code' }
  ]);
  const [input, setInput] = useState('');

  // useOptimistic hook setup
  const [optimisticTasks, addOptimisticTask] = useOptimistic(
    tasks, // The actual source of truth
    (currentTasks, newTaskText) => [ // Updater function
      ...currentTasks,
      { id: Date.now(), text: newTaskText + ' (pending...)' }
    ]
  );

  // Simulate a server action with a delay
  async function simulateServerAction(text) {
    await new Promise(resolve => setTimeout(resolve, 1500));
    // In a real Next.js app, this would be a Server Action
    // that updates a database and triggers revalidation.
    // Here, we simulate the *result* of that revalidation
    // by updating the actual 'tasks' state after the delay.
    const newServerTask = { id: Date.now(), text: text };
    setTasks((prev) => [...prev, newServerTask]);
  }

  async function handleSubmit(event) {
    event.preventDefault();
    if (input.trim() === '') return;
    const taskText = input;
    setInput(''); // Clear input immediately

    // Step 1: Optimistically update the UI
    addOptimisticTask(taskText);

    // Step 2: Call the 'server action' (simulated)
    await simulateServerAction(taskText);
  }

  return (
    <div>
      <h3>Optimistic Tasks</h3>
      <ul>
        {optimisticTasks.map(task => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Add new task..."
        />
        <button type="submit">Add Task</button>
      </form>
    </div>
  );
}

Koble til ekte Server Actions

I en aktiv Next.js-applikasjon ville funksjonen simulateServerAction fra eksempelet vårt blitt erstattet av en faktisk Next.js Server Action.

En Server Action vil vanligvis:

Oppdatere en database eller en ekstern tjeneste.
Kalle revalidatePath() eller revalidateTag() for å be Next.js hente de nyeste dataene.

Når Next.js validerer dataene på nytt, gjengis komponenten på nytt med den sanne, bekreftede tilstanden fra serveren. Den optimistiske tilstanden erstattes automatisk.

Håndtere feil og tilbakestilling

Hva skjer hvis serverhandlingen mislykkes? Det er her Optimistic UI virkelig viser sin styrke.

Hvis serverhandlingen returnerer en feil, vil Next.js sin nye validering hente de *faktiske* dataene fra serveren.
Siden serveren ikke bekreftet endringen, tilbakestilles brukergrensesnittet automatisk til den forrige korrekte tilstanden.

Mens brukergrensesnittet tilbakestilles, er det viktig å gi brukeren tilbakemelding, for eksempel med en toast-varsling som forklarer hvorfor handlingen mislyktes.

Beste praksis for Optimistic UI

Følg disse rådene for å få mest mulig ut av optimistiske oppdateringer:

Hold det enkelt: Dette passer best for enkle og forutsigbare handlinger, som å slå en «liker» av eller på eller legge til et element.
Forutsigbare resultater: Bruk dette bare når du er sikker på at serverhandlingen vil lykkes.
Tilbakemelding ved feil: Ha alltid en robust strategi for feilhåndtering, slik at brukerne får beskjed hvis en handling mislykkes.
Unngå kompleks logikk: Ikke bruk dette for handlinger med kompleks validering på serversiden eller bivirkninger som kan føre til uventede tilstander i brukergrensesnittet.

Test forståelsen din

Hvilke av følgende er viktige fordeler ved å implementere Optimistic UI-oppdateringer?

Besvar den i den interaktive leksjonen

Oppsummering: Forbedre brukeropplevelsen

Du har lært om Optimistic UI, en kraftig teknikk som får Next.js-applikasjonene dine til å føles utrolig raske og responsive.

Ved å bruke hooken useOptimistic kan du oppdatere brukergrensesnittet umiddelbart og foregripe svar fra serveren.
Denne tilnærmingen, kombinert med Next.js Server Actions og ny validering, sørger for at brukergrensesnittet til slutt gjenspeiler den faktiske tilstanden på serveren, også når det oppstår feil.

Å mestre optimistiske oppdateringer er et viktig steg mot å skape svært engasjerende brukeropplevelser!

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Optimistiske UI-oppdateringer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Optimistiske UI-oppdateringer», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.

Hva lærer jeg i «Optimistiske UI-oppdateringer»?

Implementer optimistiske UI-mønstre med Server Actions for å gi brukerne umiddelbar tilbakemelding før serveren bekrefter handlingen. Du øver på Next.js 15 fullstack (App Router + Server Actions) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Next.js 15 fullstack (App Router + Server Actions)?

Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 3.

Hvor lang tid tar leksjonen «Optimistiske UI-oppdateringer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Next.js 15 fullstack (App Router + Server Actions)-leksjonen?

Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Optimistiske UI-oppdateringer
Filopplasting med actions
Validering og feilhåndtering i Server Actions

← Tilbake til Next.js 15 fullstack (App Router + Server Actions)