ส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดีและสถานะรอดำเนินการด้วยการกระทำฝั่งเซิร์ฟเวอร์
สร้างส่วนติดต่อผู้ใช้ที่ตอบสนองฉับไวด้วยการผสานการกระทำฝั่งเซิร์ฟเวอร์เข้ากับ useOptimistic, useFormStatus และ useTransition เพื่อแสดงผลตอบกลับได้ทันที
ส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดีและสถานะรอดำเนินการด้วยการกระทำฝั่งเซิร์ฟเวอร์ เป็นบทเรียน Next.js 15 Fullstack (App Router + Server Actions) ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Next.js 15 Fullstack (App Router + Server Actions) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
Why Optimistic UI
Server Actions involve a network round trip. Optimistic UI updates the screen immediately as if the action succeeded, then reconciles with the real result for a fast feel.
Pending State with useFormStatus
The useFormStatus hook reads whether the parent form is submitting, letting you disable buttons or show spinners.
"use client";
import { useFormStatus } from "react-dom";
export function Submit() {
const { pending } = useFormStatus();
return <button disabled={pending}>{pending ? "Saving..." : "Save"}</button>;
}useOptimistic Basics
The useOptimistic hook gives you a temporary optimistic state that overrides the real state until the action resolves.
"use client";
import { useOptimistic } from "react";
const [optimistic, addOptimistic] = useOptimistic(messages, (state, next) => [...state, next]);Wiring an Optimistic Add
Call addOptimistic before invoking the action so the item appears instantly; the server then revalidates the true list.
async function action(formData) {
addOptimistic({ text: formData.get("text"), sending: true });
await sendMessage(formData);
}useTransition
useTransition marks state updates as non-urgent and exposes isPending, useful when calling a Server Action outside a form.
"use client";
const [isPending, startTransition] = useTransition();
startTransition(() => { void likePost(id); });Reconciliation
When the action finishes and the data revalidates, React discards the optimistic state and renders the authoritative server data automatically.
Handling Failures
If the action throws, the optimistic update is rolled back. Surface an error so the user knows their change did not persist.
Progressive Enhancement
Forms with Server Actions work even before JS loads. useFormStatus and optimistic hooks layer enhancement on top for interactive clients.
Disabling Double Submits
Use the pending flag to prevent duplicate submissions, which would otherwise fire the Server Action twice.
Keeping Inputs Responsive
Clear or reset the input immediately on optimistic add so the user can keep typing without waiting for the server.
Choosing the Right Hook
Use useFormStatus inside forms for pending UI, useOptimistic for instant list/state updates, and useTransition for non-form action calls.
Quick Check
What does useOptimistic provide?
Recap
You combined Server Actions with useFormStatus for pending UI, useOptimistic for instant updates with automatic reconciliation, and useTransition for non-form calls — rolling back gracefully on failure for a snappy, resilient UX.
เรียนรู้ TypeScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 22
- บทเรียน
- 88
คำถามที่พบบ่อย
บทเรียน “ส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดีและสถานะรอดำเนินการด้วยการกระทำฝั่งเซิร์ฟเวอร์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดีและสถานะรอดำเนินการด้วยการกระทำฝั่งเซิร์ฟเวอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack (App Router + Server Actions) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดีและสถานะรอดำเนินการด้วยการกระทำฝั่งเซิร์ฟเวอร์”
สร้างส่วนติดต่อผู้ใช้ที่ตอบสนองฉับไวด้วยการผสานการกระทำฝั่งเซิร์ฟเวอร์เข้ากับ useOptimistic, useFormStatus และ useTransition เพื่อแสดงผลตอบกลับได้ทันที คุณปฏิบัติ Next.js 15 Fullstack (App Router + Server Actions) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack (App Router + Server Actions) หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack (App Router + Server Actions) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดีและสถานะรอดำเนินการด้วยการกระทำฝั่งเซิร์ฟเวอร์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack (App Router + Server Actions) นี้ได้ไหม
ได้ บทเรียน Next.js 15 Fullstack (App Router + Server Actions) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟอร์ม Server Action พื้นฐาน
- การเปลี่ยนแปลงข้อมูลและการตรวจสอบใหม่
- การจัดการข้อผิดพลาดในแอ็กชัน
- ส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดีและสถานะรอดำเนินการด้วยการกระทำฝั่งเซิร์ฟเวอร์