Gegevens wijzigen en revalideren
Leer hoe Server Actions gegevens op de server kunnen wijzigen en gegevens in de cache automatisch opnieuw kunnen valideren om de UI bij te werken.
Gegevens wijzigen en revalideren is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 2 van 4. 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 4 lessen.
Wat is het wijzigen van gegevens?
In webontwikkeling betekent gegevens wijzigen dat je gegevens op de server verandert. Dit omvat het maken van nieuwe gegevens, het bijwerken van bestaande records of het verwijderen van gegevens.
- Maken: een nieuwe gebruiker toevoegen.
- Bijwerken: het e-mailadres van een gebruiker wijzigen.
- Verwijderen: een item uit een lijst verwijderen.
De meeste interactieve webtoepassingen zijn sterk afhankelijk van het wijzigen van gegevens om dynamische ervaringen te bieden.
Server Actions voor het wijzigen van gegevens
De Server Actions van Next.js 15 zijn ideaal voor het verwerken van wijzigingen in gegevens. Ze stellen je in staat servercode rechtstreeks vanuit je React-componenten uit te voeren, waardoor het eenvoudig wordt om je backend bij te werken.
In plaats van voor elke gegevenswijziging API-routes te maken, kun je deze acties definiëren op de plek waar ze nodig zijn. Zo blijft je code overzichtelijk en efficiënt.
De cache-uitdaging
Wanneer je gegevens op de server wijzigt, weerspiegelt de gebruikersinterface aan de clientzijde deze wijzigingen vaak niet automatisch. Dat komt doordat Next.js en browsers gegevens agressief cachen om de prestaties te verbeteren.
Als de gebruikersinterface na een serverupdate nog oude, gecachete gegevens toont, zien gebruikers verouderde informatie. We hebben een manier nodig om Next.js te vertellen: "Hé, deze gegevens zijn gewijzigd, haal de actuele versie op!"
Revalideren met `revalidatePath`
Om ervoor te zorgen dat je gebruikersinterface de nieuwste gegevens toont, biedt Next.js hulpprogramma's voor caching. Een veelgebruikte methode is revalidatePath.
Nadat een Server Action gegevens heeft gewijzigd, kun je revalidatePath('/') aanroepen om Next.js te vertellen de cache voor het opgegeven pad ongeldig te maken, bijvoorbeeld voor de startpagina, en de gegevens bij het volgende verzoek opnieuw op te halen.
Demo: pad bijwerken en revalideren
Dit voorbeeld toont een eenvoudig formulier waarmee je via een Server Action een taak toevoegt. Nadat de taak is toegevoegd, zorgt revalidatePath('/') ervoor dat alle gegevens die op de hoofdroute worden weergegeven, zoals een takenlijst, worden vernieuwd.
import { revalidatePath } from 'next/cache';
async function addTask(formData) {
'use server';
const task = formData.get('task');
// Simulate saving to a database
console.log('Adding task:', task);
await new Promise(r => setTimeout(r, 500));
// Revalidate the home page to show new tasks
revalidatePath('/');
}
export default function Page() {
return (
<div>
<h1>My Task List</h1>
<form action={addTask}>
<input type="text" name="task" placeholder="New task" required />
<button type="submit">Add Task</button>
</form>
<p>Task list will refresh after adding!</p>
</div>
);
}Gerichte controle met `revalidateTag`
Soms heb je fijnmazigere controle over caching nodig dan alleen het revalideren van een volledig pad. Daarvoor is revalidateTag bedoeld.
Bij het ophalen van gegevens kun je met de API fetch een aangepaste tag toewijzen. Daarna kun je na een wijziging revalidateTag('my-data-tag') gebruiken om alleen de gegevens die aan die specifieke tag zijn gekoppeld ongeldig te maken.
Wanneer gebruik je `revalidateTag`
Gebruik revalidateTag wanneer:
- gegevens met
fetchuit een externe API worden opgehaald; - de gegevens worden gedeeld door meerdere pagina's of componenten;
- je specifieke gegevens wilt bijwerken zonder volledige pagina's opnieuw weer te geven.
Dit is ideaal voor situaties zoals het bijwerken van de profielgegevens van één gebruiker, die op verschillende pagina's kunnen worden weergegeven.
Omleiden na een wijziging
Na een geslaagde wijziging van gegevens wil je de gebruiker vaak omleiden naar een andere pagina, bijvoorbeeld een succespagina of de pagina met de bijgewerkte lijst. Next.js biedt hiervoor de helper redirect.
Je kunt redirect('/dashboard') binnen je Server Action gebruiken om de gebruiker na het verzenden van een formulier naar het dashboard te sturen.
Volledige stroom: wijzigen, revalideren, omleiden
Dit voorbeeld combineert alle concepten: het verzenden van een formulier activeert een Server Action die gegevens wijzigt, het relevante pad revalideert en de gebruiker vervolgens omleidt naar een bevestigingspagina.
import { revalidatePath, redirect } from 'next/cache';
async function createPost(formData) {
'use server';
const title = formData.get('title');
const content = formData.get('content');
// Simulate saving new post to a DB
console.log('New Post:', { title, content });
await new Promise(r => setTimeout(r, 700));
revalidatePath('/posts'); // Revalidate the posts list page
redirect('/posts/success'); // Redirect to a success page
}
export default function NewPostPage() {
return (
<div>
<h1>Create New Post</h1>
<form action={createPost}>
<input type="text" name="title" placeholder="Title" required />
<textarea name="content" placeholder="Content" required />
<button type="submit">Publish Post</button>
</form>
</div>
);
}Korte controle over revalidatie
Een Server Action maakt met succes een nieuw product en je wilt de productoverzichtspagina (/products) bijwerken. Je wilt ook garanderen dat alle gecachete gegevens met de tag 'featured-products' worden vernieuwd. Welke revalidatiemethoden moet je gebruiken?
Samenvatting: wijzigen en revalideren
Goed gedaan! Je hebt geleerd hoe belangrijk Server Actions zijn voor het wijzigen van gegevens op de server. Je hebt ook geleerd hoe je je gebruikersinterface actueel houdt:
- Gebruik Server Actions om gegevens te maken, bij te werken of te verwijderen.
- Gebruik
revalidatePathom gegevens voor specifieke routes te vernieuwen. - Gebruik
revalidateTagvoor fijnmazige cache-invalidering van getagdefetch-verzoeken. - Gebruik
redirectom gebruikers na een geslaagde actie naar de juiste plek te sturen.
Deze krachtige combinatie zorgt ervoor dat je Next.js-toepassingen altijd correcte en actuele informatie tonen.
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
Veelgestelde vragen
Is de les “Gegevens wijzigen en revalideren” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Gegevens wijzigen en revalideren”, 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 4 lessen.
Wat leer ik in “Gegevens wijzigen en revalideren”?
Leer hoe Server Actions gegevens op de server kunnen wijzigen en gegevens in de cache automatisch opnieuw kunnen valideren om de UI bij te werken. 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 2 van 4.
Hoe lang duurt de les “Gegevens wijzigen en revalideren”?
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
- Basisformulieren met Server Actions
- Gegevens wijzigen en revalideren
- Foutafhandeling in Actions
- Optimistische UI en wachtstatussen met Server Actions