Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) · Les

Optimistische UI-updates

Implementeer optimistische UI-patronen met Server Actions om gebruikers direct feedback te geven voordat de server bevestigt.

Les 1 van 311 stappen

Optimistische UI-updates is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 1 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 3 lessen.

Directe feedback met een optimistische interface

Stel je voor dat je op 'Vind ik leuk' klikt bij een bericht. Wordt de status meteen bijgewerkt, of moet je wachten op een laadindicator?

Een optimistische interface is een techniek waarbij de gebruikersinterface direct na een actie wordt bijgewerkt, *voordat* de server dit bevestigt. Zo krijgen gebruikers direct feedback en voelt je app veel sneller en responsiever aan.

Zo werkt een optimistische interface

Het proces is eenvoudig:

Actie van de gebruiker: De gebruiker voert een actie uit, bijvoorbeeld het verzenden van een formulier.
Directe update van de interface: Je interface wordt direct bijgewerkt om het *verwachte* resultaat weer te geven.
Actie op de server: Op de achtergrond wordt een serververzoek, zoals een Next.js Server Action, verzonden om de daadwerkelijke bewerking uit te voeren.
Synchronisatie: Als de serveractie slaagt, blijft de interface zoals die is. Als de actie mislukt, wordt de interface teruggezet naar de vorige toestand.

Zo ontstaat een vloeiende, ononderbroken gebruikerservaring.

Next.js 15 en useOptimistic

Next.js 15, gebaseerd op React, biedt de hook useOptimistic om optimistische updates van de gebruikersinterface eenvoudig te implementeren.

Deze hook is speciaal ontworpen om een tijdelijke, speculatieve toestand te beheren die anticipeert op het resultaat van een asynchrone bewerking, zoals een Server Action, voordat de definitieve serverreactie is ontvangen.

De syntaxis van useOptimistic begrijpen

De hook useOptimistic heeft een eenvoudige signatuur:

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

state: De werkelijke, gezaghebbende toestand, bijvoorbeeld gegevens die van de server zijn opgehaald.
updater: Een functie die de huidige toestand en een payload ontvangt en de nieuwe optimistische toestand teruggeeft.
optimisticState: De toestand die je interface momenteel moet weergeven. Dit is ofwel de werkelijke state of de optimistisch bijgewerkte toestand.
addOptimistic: Een functie die je met een payload aanroept om een optimistische update te activeren.

Codec demonstratie: eenvoudige takenlijst

Laten we beginnen met een eenvoudige clientcomponent die met de standaard-React-hook useState een lijst met taken beheert. Voer dit uit om te zien hoe het normaal werkt.

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

Codec demonstratie: optimistische updates toevoegen

Laten we onze takenlijst nu uitbreiden met useOptimistic. Wanneer je een taak toevoegt, verschijnt die direct met het label ' (in behandeling...)', nog voordat onze gesimuleerde serveractie is voltooid.

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

Verbinding maken met echte serveracties

In een actieve Next.js-toepassing zou de functie simulateServerAction uit ons voorbeeld worden vervangen door een echte Next.js Server Action.

Een Server Action zou doorgaans:

Een database of externe service bijwerken.
revalidatePath() of revalidateTag() aanroepen om Next.js te laten weten dat de meest recente gegevens moeten worden opgehaald.

Wanneer Next.js opnieuw valideert, wordt je component opnieuw weergegeven met de werkelijke, bevestigde toestand van de server. De optimistische toestand wordt dan automatisch vervangen.

Fouten en terugdraaien afhandelen

Wat gebeurt er als de serveractie mislukt? Dan komt de kracht van een optimistische interface echt naar voren.

Als de serveractie een fout retourneert, haalt de hernieuwde validatie van Next.js de *werkelijke* gegevens van de server op.
Omdat de server de wijziging niet heeft bevestigd, wordt de interface automatisch teruggezet naar de vorige correcte toestand.

Terwijl de interface wordt teruggezet, is het essentieel om de gebruiker feedback te geven, bijvoorbeeld met een toastmelding waarin je uitlegt waarom de actie is mislukt.

Best practices voor optimistische interfaces

Haal het meeste uit optimistische updates:

Houd het eenvoudig: Dit werkt het best voor eenvoudige, voorspelbare acties, zoals een 'Vind ik leuk'-status omzetten of een item toevoegen.
Voorspelbare resultaten: Gebruik dit alleen wanneer je er vertrouwen in hebt dat de serveractie slaagt.
Feedback bij fouten: Zorg altijd voor een robuuste strategie voor het afhandelen van fouten, zodat gebruikers worden geïnformeerd als een actie mislukt.
Vermijd complexe logica: Gebruik dit niet voor acties met complexe validatie op de server of neveneffecten die tot onverwachte toestanden van de interface kunnen leiden.

Controleer je begrip

Welke van de volgende punten zijn belangrijke voordelen van het implementeren van optimistische updates van de gebruikersinterface?

Beantwoord dit in de interactieve les

Samenvatting: de gebruikerservaring verbeteren

Je hebt geleerd wat een optimistische interface is: een krachtige techniek om je Next.js-toepassingen uitzonderlijk snel en responsief te laten aanvoelen.

Met de hook useOptimistic kun je de interface direct bijwerken en anticiperen op serverreacties.
Deze aanpak zorgt er in combinatie met Next.js Server Actions en hernieuwde validatie voor dat de interface uiteindelijk de werkelijke toestand op de server weergeeft, zelfs bij fouten.

Het beheersen van optimistische updates is een mooie stap in de richting van zeer boeiende gebruikerservaringen!

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Optimistische UI-updates” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Optimistische UI-updates”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 3 lessen.

Wat leer ik in “Optimistische UI-updates”?

Implementeer optimistische UI-patronen met Server Actions om gebruikers direct feedback te geven voordat de server bevestigt. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?

Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 3.

Hoe lang duurt de les “Optimistische UI-updates”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?

Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Optimistische UI-updates
Bestanden uploaden met Actions
Validatie en foutafhandeling in Server Actions

← Terug naar Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)