Memuat Ulang Halaman

Selama dua pelajaran, kamu hidup dengan kebohongan. Kirim formulirnya, dan item memang tersimpan, tetapi layar tidak berubah. Muat ulang halaman, dan item itu muncul.

Alasannya persis seperti yang membuat Server Components cepat. Halaman membaca datanya sekali, di server, dan yang tersimpan di browser adalah hasil akhirnya. Aksimu mengubah data di baliknya. Tidak ada yang memberi tahu halaman itu.

Perbaikannya hanya satu baris, di akhir action:

'use server';

import { revalidatePath } from 'next/cache';
import { saveTask } from '../lib/db';

export async function addTask(formData) {
    saveTask(formData.get('title'));
    revalidatePath('/');
}

revalidatePath('/') membuang cache Next.js untuk rute tersebut dan merendernya kembali (di server, dengan data terbaru), lalu mengganti konten halaman dengan hasil yang baru. Tanpa memuat ulang, tanpa indikator pemuatan, tanpa state.

Argumennya adalah rute yang akan dirender ulang, ditulis seperti yang muncul di URL: '/' untuk halaman beranda, '/tasks' untuk halaman tugas. Arahkan ke path yang salah dan tidak ada perubahan yang terlihat: bug klasik "aksiku berfungsi, tetapi daftarnya sudah usang".

Terkadang, kamu tidak ingin tetap berada di tempat yang sama. Untuk “simpan, lalu pindah ke tempat lain”, Server Action bisa diakhiri dengan redirect():

import { redirect } from 'next/navigation';

export async function createPost(formData) {
    const id = savePost(formData.get('title'));
    redirect(`/posts/${id}`);
}

Import yang sama seperti yang kamu gunakan di halaman. Gunakan revalidatePath saat pengguna tetap berada di halaman, dan redirect saat mereka berpindah.