Nextjs Optimistic UI Client Cache Revalidation Server Action

Definisi

Optimistic UI adalah pola di mana UI diperbarui sebelum server merespons, untuk kesan instan. Di Next.js App Router, ini sering dipadukan dengan Server Action dan useOptimistic (client) atau revalidatePath/revalidateTag (server). Client cache revalidation menentukan kapan data stale dibuang setelah mutasi.

Kapan dipakai

Pakai optimistic UI untuk aksi yang hampir pasti sukses dan butuh feedback instan: like, toggle, tambah ke keranjang, komentar. Jangan pakai untuk aksi kritis (transfer, pembayaran) tanpa rollback jelas, karena kalau gagal UI harus dikembalikan.

Cara kerja

useOptimistic (client)

tsx

'use client';
import { useOptimistic } from 'react';
 
function Like({ initial }: { initial: number }) {
    const [optimistic, setOptimistic] = useOptimistic(initial, (_, v: number) => v);
    // setOptimistic dipakai di event, lalu di-confirm oleh server
}

Server Action + revalidate

ts

'use server';
export async function toggleLike(id: string) {
    await repo.toggle(id);
    revalidateTag(`like-${id}`);
}

Setelah action selesai, cache bertag tersebut dibuang, halaman berikutnya ambil data segar.

Router refresh

ts

import { useRouter } from 'next/navigation';
const router = useRouter();
await toggleLike(id);
router.refresh(); // ambil ulang data server untuk route ini

Struktur alur

Contoh optimistic + rollback

tsx

const [state, setState] = useState(0);
async function onClick() {
    setState(s => s + 1); // optimistik
    try {
        await toggleLike(id);
        router.refresh();
    } catch {
        setState(s => s - 1); // rollback
    }
}

Catatan implementasi

• useOptimistic hanya berlaku saat transisi sedang berjalan; setelah selesai, nilai dikembalikan ke prop asli (atau hasil server).
• Kombinasikan optimistic dengan revalidateTag supaya tidak ada data dobel.
• Jangan optimistik untuk data yang bergantung validasi server ketat.

Kesalahan umum

• Tidak ada rollback: kalau server gagal, UI tetap menampilkan状态 salah.
• Double source of truth: optimistic state dan server cache berantakan karena tidak di-revalidate.
• Optimistic untuk aksi berat: user dikira sukses padahal butuh konfirmasi async lama.
• Lupa revalidateTag: UI tidak pernah sinkron dengan server setelah berhasil.

Referensi terkait

• Next.js Forms, Server Actions, Optimistic UI, Pending States
• Next.js Route Handlers, Server Actions, Revalidation Tags
• React.js Forms: Controlled, Validation, Submit Flow