Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) · Pelajaran

Kemas Kini UI Optimistik

Laksanakan corak UI optimistik dengan Server Actions untuk memberikan maklum balas segera kepada pengguna sebelum pengesahan pelayan.

Pelajaran 1 daripada 311 langkah

Kemas Kini UI Optimistik ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 1 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 3 pelajaran.

Maklum Balas Segera dengan UI Optimistik

Bayangkan anda mengklik 'Suka' pada sesuatu kiriman. Adakah ia dikemas kini serta-merta, atau adakah anda perlu menunggu pemutar pemuatan?

UI optimistik ialah teknik yang mengemas kini antara muka pengguna dengan serta-merta selepas sesuatu tindakan, *sebelum* pelayan mengesahkannya. Hal ini memberikan maklum balas segera kepada pengguna dan menjadikan aplikasi anda terasa lebih pantas serta lebih responsif.

Cara UI Optimistik Berfungsi

Prosesnya mudah:

Tindakan Pengguna: Pengguna melakukan sesuatu tindakan (contohnya, menghantar borang).
Kemas Kini UI Segera: UI anda dikemas kini serta-merta untuk mencerminkan hasil yang *dijangka*.
Tindakan Pelayan: Di latar belakang, permintaan pelayan (seperti Tindakan Pelayan Next.js) dihantar untuk melaksanakan operasi sebenar.
Penyelarasan: Jika tindakan pelayan berjaya, UI kekal seperti sedia ada. Jika tindakan itu gagal, UI kembali kepada keadaan sebelumnya.

Hal ini menghasilkan pengalaman pengguna yang lancar dan tidak terganggu.

Next.js 15 & useOptimistic

Next.js 15, yang dikuasakan oleh React, menyediakan cangkuk useOptimistic untuk memudahkan pelaksanaan kemas kini UI optimistik.

Cangkuk ini direka khusus untuk mengurus keadaan sementara dan andaian yang menjangkakan hasil operasi tak segerak (seperti Tindakan Pelayan) sebelum respons akhir pelayan diterima.

Memahami Sintaks useOptimistic

Cangkuk useOptimistic mempunyai tandatangan yang mudah:

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

state: Keadaan sebenar yang menjadi rujukan utama (contohnya, data yang diambil daripada pelayan).
updater: Fungsi yang menerima keadaan semasa dan muatan, lalu mengembalikan keadaan optimistik yang baharu.
optimisticState: Keadaan yang patut dipaparkan oleh UI anda pada masa ini. Keadaan ini sama ada state sebenar atau keadaan yang dikemas kini secara optimistik.
addOptimistic: Fungsi yang anda panggil dengan muatan untuk mencetuskan kemas kini optimistik.

Demo Kod: Senarai Tugas Asas

Mari kita mulakan dengan komponen klien ringkas yang mengurus senarai tugas menggunakan React useState standard. Jalankan kod ini untuk melihat cara ia berfungsi secara biasa.

'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 Kod: Menambah Kemas Kini Optimistik

Sekarang, mari kita tingkatkan senarai tugas kita dengan useOptimistic. Apabila anda menambah tugas, tugas itu akan muncul serta-merta dengan label ' (menunggu...)', walaupun tindakan pelayan simulasi kita belum 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>
  );
}

Menyambung kepada Tindakan Pelayan Sebenar

Dalam aplikasi Next.js secara langsung, fungsi simulateServerAction daripada contoh kita akan digantikan dengan Tindakan Pelayan Next.js yang sebenar.

Tindakan Pelayan biasanya akan:

Mengemas kini pangkalan data atau perkhidmatan luaran.
Memanggil revalidatePath() atau revalidateTag() untuk memberitahu Next.js supaya mengambil data terkini.

Apabila Next.js mengesahkan semula data, komponen anda akan dipaparkan semula dengan keadaan sebenar yang telah disahkan oleh pelayan, lalu menggantikan keadaan optimistik secara automatik.

Mengendalikan Ralat dan Pengembalian

Apakah yang berlaku jika tindakan pelayan gagal? Di sinilah UI optimistik benar-benar menyerlah.

Jika tindakan pelayan mengembalikan ralat, pengesahan semula oleh Next.js akan mengambil data *sebenar* daripada pelayan.
Oleh sebab pelayan tidak mengesahkan perubahan tersebut, UI akan kembali secara automatik kepada keadaan betul yang sebelumnya.

Semasa UI kembali kepada keadaan sebelumnya, adalah penting untuk memberikan maklum balas kepada pengguna, seperti pemberitahuan roti bakar, yang menerangkan sebab tindakan itu gagal.

Amalan Terbaik untuk UI Optimistik

Untuk mendapatkan manfaat sepenuhnya daripada kemas kini optimistik:

Pastikan Ringkas: Paling sesuai untuk tindakan yang mudah dan boleh dijangka, seperti menogol tanda 'suka' atau menambah item.
Hasil yang Boleh Dijangka: Gunakan hanya apabila anda yakin tindakan pelayan akan berjaya.
Maklum Balas Ralat: Sentiasa sediakan strategi pengendalian ralat yang kukuh untuk memaklumkan pengguna jika sesuatu tindakan gagal.
Elakkan Logik yang Rumit: Jangan gunakan untuk tindakan yang mempunyai pengesahan pada pelayan yang rumit atau kesan sampingan yang boleh menyebabkan keadaan UI tidak dijangka.

Uji Pemahaman Anda

Antara berikut, yang manakah manfaat utama pelaksanaan kemas kini UI optimistik?

Jawab dalam pelajaran interaktif

Imbas Kembali: Tingkatkan Pengalaman Pengguna

Anda telah mempelajari tentang UI optimistik, iaitu teknik berkuasa untuk menjadikan aplikasi Next.js anda terasa sangat pantas dan responsif.

Dengan menggunakan cangkuk useOptimistic, anda boleh mengemas kini UI serta-merta sambil menjangkakan respons pelayan.
Pendekatan ini, yang digabungkan dengan Tindakan Pelayan Next.js dan pengesahan semula, memastikan UI akhirnya mencerminkan keadaan sebenar pelayan, walaupun berlaku ralat.

Menguasai kemas kini optimistik ialah langkah yang baik ke arah membina pengalaman pengguna yang sangat menarik!

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Kemas Kini UI Optimistik” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Kemas Kini UI Optimistik”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Kemas Kini UI Optimistik”?

Laksanakan corak UI optimistik dengan Server Actions untuk memberikan maklum balas segera kepada pengguna sebelum pengesahan pelayan. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 3.

Berapa lamakah pelajaran “Kemas Kini UI Optimistik” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?

Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Kemas Kini UI Optimistik
Muat Naik Fail dengan Tindakan
Pengesahan dan Pengendalian Ralat dalam Tindakan Pelayan

← Kembali ke Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)