Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Pembaruan UI Optimistis

Implementasikan pola UI optimistis dengan Server Actions untuk memberikan umpan balik langsung kepada pengguna sebelum konfirmasi server.

Pembaruan UI Optimistis adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 3 pelajaran total.

Umpan Balik Instan dengan Optimistic UI

Bayangkan Anda mengklik 'Suka' pada sebuah postingan. Apakah langsung terbarui, atau Anda harus menunggu ikon berputar (spinner)?

Optimistic UI adalah teknik di mana antarmuka pengguna (UI) langsung diperbarui setelah sebuah aksi, *sebelum* server mengonfirmasinya. Ini memberikan umpan balik instan kepada pengguna dan membuat aplikasi Anda terasa jauh lebih cepat dan responsif.

Cara Kerja Optimistic UI

Prosesnya sederhana:

Aksi Pengguna: Pengguna melakukan sebuah aksi (misalnya, mengirimkan form).
Pembaruan UI Instan: UI Anda segera diperbarui untuk mencerminkan hasil yang *diharapkan*.
Aksi Server: Di latar belakang, sebuah permintaan server (seperti Next.js Server Action) dikirim untuk melakukan operasi yang sebenarnya.
Rekonsiliasi: Jika aksi server berhasil, UI tetap seperti semula. Jika gagal, UI akan kembali ke keadaan sebelumnya.

Ini menciptakan pengalaman pengguna yang mulus dan tanpa gangguan.

Next.js 15 & useOptimistic

Next.js 15, didukung oleh React, menyediakan hook useOptimistic untuk membuat implementasi pembaruan Optimistic UI menjadi mudah.

Hook ini dirancang khusus untuk mengelola state sementara yang spekulatif, yang mengantisipasi hasil dari operasi asinkron (seperti Server Action) sebelum respons akhir dari server diterima.

Memahami Sintaks useOptimistic

Hook useOptimistic memiliki sintaks sederhana:

const [optimisticState, addOptimistic] = useOptimistic(state, updater);

state: State yang sebenarnya, atau state otoritatif (misalnya, data yang diambil dari server).
updater: Sebuah fungsi yang menerima state saat ini dan sebuah payload, lalu mengembalikan state optimistik yang baru.
optimisticState: State yang seharusnya ditampilkan oleh UI Anda saat ini. Ini akan menjadi state yang sebenarnya atau state yang diperbarui secara optimistik.
addOptimistic: Sebuah fungsi yang Anda panggil dengan sebuah payload untuk memicu pembaruan optimistik.

Demo Kode: Daftar Tugas Dasar

Mari kita mulai dengan komponen klien sederhana yang mengelola daftar tugas menggunakan useState standar dari React. Jalankan ini untuk melihat cara kerjanya secara normal.

'use client';

import { useState } from 'react';

export default function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Plan lesson' },
    { id: 2, text: 'Review code' }
  ]);
  const [input, setInput] = useState('');

  const handleAddTask = () => {
    if (input.trim() === '') return;
    const newTask = { id: Date.now(), text: input };
    setTasks((prev) => [...prev, newTask]);
    setInput('');
  };

  return (
    <div>
      <h3>My Daily Tasks</h3>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add new task..."
      />
      <button onClick={handleAddTask}>Add Task</button>
    </div>
  );
}

Demo Kode: Menambahkan Pembaruan Optimistik

Sekarang, mari kita tingkatkan daftar tugas kita dengan useOptimistic. Ketika Anda menambahkan tugas, tugas itu akan langsung muncul dengan label ' (pending...)', bahkan sebelum aksi server simulasi kita selesai.

'use client';

import { useState, useOptimistic } from 'react';

export default function OptimisticTaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Plan lesson' },
    { id: 2, text: 'Review code' }
  ]);
  const [input, setInput] = useState('');

  // useOptimistic hook setup
  const [optimisticTasks, addOptimisticTask] = useOptimistic(
    tasks, // The actual source of truth
    (currentTasks, newTaskText) => [ // Updater function
      ...currentTasks,
      { id: Date.now(), text: newTaskText + ' (pending...)' }
    ]
  );

  // Simulate a server action with a delay
  async function simulateServerAction(text) {
    await new Promise(resolve => setTimeout(resolve, 1500));
    // In a real Next.js app, this would be a Server Action
    // that updates a database and triggers revalidation.
    // Here, we simulate the *result* of that revalidation
    // by updating the actual 'tasks' state after the delay.
    const newServerTask = { id: Date.now(), text: text };
    setTasks((prev) => [...prev, newServerTask]);
  }

  async function handleSubmit(event) {
    event.preventDefault();
    if (input.trim() === '') return;
    const taskText = input;
    setInput(''); // Clear input immediately

    // Step 1: Optimistically update the UI
    addOptimisticTask(taskText);

    // Step 2: Call the 'server action' (simulated)
    await simulateServerAction(taskText);
  }

  return (
    <div>
      <h3>Optimistic Tasks</h3>
      <ul>
        {optimisticTasks.map(task => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Add new task..."
        />
        <button type="submit">Add Task</button>
      </form>
    </div>
  );
}

Menghubungkan ke Aksi Server Nyata

Dalam aplikasi Next.js yang sesungguhnya, fungsi simulateServerAction dari contoh kita akan diganti dengan Next.js Server Action yang sebenarnya.

Server Action biasanya akan:

Memperbarui database atau layanan eksternal.
Memanggil revalidatePath() atau revalidateTag() untuk memberi tahu Next.js agar mengambil data terbaru.

Ketika Next.js melakukan revalidasi, komponen Anda akan di-render ulang dengan state yang benar dan terkonfirmasi dari server, secara otomatis menggantikan state optimistik.

Menangani Error dan Pengembalian

Apa yang terjadi jika aksi server gagal? Di sinilah Optimistic UI benar-benar menunjukkan keunggulannya.

Jika aksi server mengembalikan error, revalidasi Next.js akan mengambil data *aktual* dari server.
Karena server tidak mengonfirmasi perubahan, UI akan secara otomatis kembali ke state benar sebelumnya.

Meskipun UI kembali, penting untuk memberikan umpan balik kepada pengguna, seperti notifikasi toast, yang menjelaskan mengapa aksi tersebut gagal.

Praktik Terbaik untuk Optimistic UI

Untuk memaksimalkan pembaruan optimistik:

Jaga Kesederhanaan: Terbaik untuk aksi sederhana dan dapat diprediksi seperti mengganti status 'suka' atau menambahkan item.
Hasil yang Dapat Diprediksi: Hanya gunakan saat Anda yakin aksi server akan berhasil.
Umpan Balik Error: Selalu miliki strategi penanganan error yang kuat untuk memberi tahu pengguna jika sebuah aksi gagal.
Hindari Logika Kompleks: Jangan gunakan untuk aksi dengan validasi sisi server yang kompleks atau efek samping yang mungkin menyebabkan state UI yang tidak terduga.

Uji Pemahaman Anda

Manakah dari berikut ini yang merupakan manfaat utama dari implementasi pembaruan Optimistic UI?

Rangkuman: Meningkatkan Pengalaman Pengguna

Anda telah mempelajari tentang Optimistic UI, sebuah teknik ampuh untuk membuat aplikasi Next.js Anda terasa sangat cepat dan responsif.

Dengan menggunakan hook useOptimistic, Anda dapat memperbarui UI secara instan, mengantisipasi respons server.
Pendekatan ini, dikombinasikan dengan Next.js Server Actions dan revalidasi, memastikan UI pada akhirnya mencerminkan state server yang sebenarnya, bahkan dalam kasus error.

Menguasai pembaruan optimistik adalah langkah besar menuju pembangunan pengalaman pengguna yang sangat menarik!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pembaruan UI Optimistis” gratis?

Ya — teks lengkap “Pembaruan UI Optimistis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Pembaruan UI Optimistis”?

Implementasikan pola UI optimistis dengan Server Actions untuk memberikan umpan balik langsung kepada pengguna sebelum konfirmasi server. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Pembaruan UI Optimistis” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Pembaruan UI Optimistis
Unggah Berkas dengan Actions
Validasi dan Penanganan Kesalahan dalam Server Actions

← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)