Nextjs Optimistic UI Client Cache Revalidation Server Action

Next.js1 September 20262 menit baca

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:

Selesai membaca dokumentasi ini?

Kembali ke rujukan utama Next.js untuk melanjutkan topik lainnya.

Kembali ke Kategori

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
    }
}

Nextjs Optimistic UI Client Cache Revalidation Server Action | Rujukan Pemrograman | Mahir.dev Academy

Nextjs Optimistic UI Client Cache Revalidation Server Action

Nextjs Optimistic UI Client Cache Revalidation Server Action

Definisi

Kapan dipakai

Cara kerja

useOptimistic (client)

Selesai membaca dokumentasi ini?

Server Action + revalidate

Router refresh

Struktur alur

Contoh optimistic + rollback

Catatan implementasi

Kesalahan umum

Referensi terkait