Endring av data og revalidering
Lær hvordan Server Actions kan endre data på serveren og automatisk revalidere hurtigbufrede data for å oppdatere brukergrensesnittet.
Endring av data og revalidering er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 2 av 4. 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 4 leksjoner.
Hva er en dataendring?
I webutvikling betyr dataendring å endre data på serveren. Dette omfatter å opprette nye data, oppdatere eksisterende poster eller slette data.
- Opprette: Legge til en ny bruker.
- Oppdatere: Endre e-postadressen til en bruker.
- Slette: Fjerne et element fra en liste.
De fleste interaktive webapplikasjoner er svært avhengige av dataendringer for å gi dynamiske brukeropplevelser.
Server Actions for dataendringer
Server Actions i Next.js 15 egner seg svært godt til å håndtere dataendringer. De lar Dem kjøre serverkode direkte fra React-komponentene Deres, slik at det blir enkelt å oppdatere backend-systemet.
I stedet for å opprette API-ruter for hver dataendring kan De definere disse handlingene der de trengs, slik at koden holdes organisert og effektiv.
Utfordringen med bufferen
Når De endrer data på serveren, gjenspeiler brukergrensesnittet på klientsiden ofte ikke disse endringene automatisk. Det skyldes at Next.js og nettlesere bufrer data aggressivt for å forbedre ytelsen.
Hvis brukergrensesnittet fortsatt viser gamle, bufrede data etter en serveroppdatering, ser brukerne utdatert informasjon. Vi trenger en måte å fortelle Next.js på: «Hei, disse dataene er endret. Hent den nyeste versjonen!»
Revalidere med `revalidatePath`
For å sikre at brukergrensesnittet viser de nyeste dataene, tilbyr Next.js verktøy for bufring. En vanlig metode er revalidatePath.
Etter at en Server Action har endret data, kan De kalle revalidatePath('/') for å fortelle Next.js at bufferen for den angitte stien (for eksempel hjemmesiden) skal ugyldiggjøres, slik at dataene hentes på nytt ved neste forespørsel.
Demo: Oppdatere og revalidere en sti
Dette eksempelet viser et enkelt skjema som legger til en oppgave ved hjelp av en Server Action. Etter at oppgaven er lagt til, sørger revalidatePath('/') for at data som vises på rotssiden (for eksempel en oppgaveliste), oppdateres.
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>
);
}Detaljert kontroll med `revalidateTag`
Noen ganger trenger De mer detaljert kontroll over bufringen enn bare å revalidere en hel sti. Det er her revalidateTag kommer inn.
Når De henter data, kan De tilordne en egendefinert tag ved hjelp av fetch-API-et. Etter en dataendring kan De bruke revalidateTag('my-data-tag') til å ugyldiggjøre bare dataene som er knyttet til den aktuelle taggen.
Når bør De bruke `revalidateTag`
Bruk revalidateTag når:
- Data hentes fra et eksternt API ved hjelp av
fetch. - Dataene deles mellom flere sider eller komponenter.
- De vil oppdatere bestemte data uten å gjengi hele sider på nytt.
Det er ideelt i situasjoner som oppdatering av profildata for én bruker, når dataene kan vises på flere sider.
Omdirigering etter dataendring
Etter en vellykket dataendring vil De ofte omdirigere brukeren til en annen side (for eksempel en suksesside eller siden med den oppdaterte listen). Next.js tilbyr hjelpefunksjonen redirect til dette.
De kan bruke redirect('/dashboard') i Server Action for å sende brukeren til kontrollpanelet etter at et skjema er sendt inn.
Hele prosessen: Endre, revalidere, omdirigere
Dette eksempelet kombinerer alle konseptene: En skjemainnsending utløser en Server Action som endrer data, revaliderer den relevante stien og deretter omdirigerer brukeren til en bekreftelsesside.
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>
);
}Hurtigsjekk av revalidering
En Server Action oppretter et nytt produkt, og De vil oppdatere siden med produktlisten (/products) samt sikre at alle bufrede data som er merket spesifikt med «featured-products», oppdateres. Hvilke revalideringsmetoder bør De bruke?
Oppsummering: Endre og revalidere
Godt jobbet! De har lært hvordan Server Actions er sentrale for å endre data på serveren. De har også lært hvordan De holder brukergrensesnittet oppdatert:
- Bruk Server Actions til å opprette, oppdatere eller slette data.
- Bruk
revalidatePathtil å oppdatere data for bestemte ruter. - Bruk
revalidateTagtil detaljert ugyldiggjøring av bufferen for merkedefetch-forespørsler. - Bruk
redirecttil å veilede brukerne etter en vellykket handling.
Denne kraftige kombinasjonen sikrer at Next.js-applikasjonene Deres alltid viser korrekt og oppdatert informasjon.
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
Ofte stilte spørsmål
Er leksjonen «Endring av data og revalidering» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Endring av data og revalidering», 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 4 leksjoner.
Hva lærer jeg i «Endring av data og revalidering»?
Lær hvordan Server Actions kan endre data på serveren og automatisk revalidere hurtigbufrede data for å oppdatere brukergrensesnittet. 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 2 av 4.
Hvor lang tid tar leksjonen «Endring av data og revalidering»?
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
- Grunnleggende skjemaer med Server Actions
- Endring av data og revalidering
- Feilhåndtering i actions
- Optimistisk UI og ventetilstander med Server Actions