Lộ trình/4. Next.js 15 Fullstack App Router/Server Actions & Cập Nhật Dữ Liệu An Toàn Với revalidatePath

Mentor Alex

Gia Sư AI Trực Tiếp

Dạy kèm & Hướng dẫn theo từng bước

Gợi ý hỏi:

CẤP ĐỘ INTERMEDIATE +75 XP

4. Next.js 15 Fullstack App Router•⏱️ 15 phút

Server Actions & Cập Nhật Dữ Liệu An Toàn Với revalidatePath

Thực thi hàm backend trực tiếp từ Form Client với kiểu dữ liệu an toàn và tự động làm mới giao diện.

Ẩn Dụ Thực Tế (Dễ Nhớ)

“Server Action như đường dây nóng trực tiếp từ nút bấm trên màn hình đến két sắt database trên máy chủ, không cần qua trạm trung chuyển API trung gian.”

🎯 Cú Pháp Server Action

typescript
export async function capNhatTienDo(lessonId: string, xp: number) {
  'use server';
  await db.prepare('UPDATE users SET xp = xp + ?').bind(xp).run();
  revalidatePath('/roadmap');
}

Lỗi Người Mới Hay Gặp

•Quên validate dữ liệu đầu vào ở Server Action trước khi ghi vào Database

Lời Khuyên Cốt Lõi

Sau khi cập nhật DB trong Server Action, luôn gọi 'revalidatePath()' để Next.js làm mới cache.