Server Actions là các hàm async chạy trên server nhưng có thể được gọi trực tiếp từ component của bạn (kể cả từ form và event handler) — cho phép bạn thực hiện mutation (create/update/delete) mà không cần tự xây dựng một API endpoint. Bạn đánh dấu chúng bằng directive "use server".
;
{ revalidatePath } ;
() {
title = formData.() ;
db..({ : { title } });
();
}
// app/todos/page.tsx — nối action thẳng vào một form
import { createTodo } from "./actions";
export default function Page() {
return (
<form action={createTodo}> {/* không onSubmit, không fetch, không route /api */}
<input name="title" />
<button>Add</button>
</form>
);
}
action của form trỏ tới Server Action. Khi submit, Next.js gửi FormData tới server, chạy hàm ở đó, và có thể revalidate các trang bị ảnh hưởng — tất cả không cần API route và không có code fetch phía client.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts và fetch ở client.revalidatePath/revalidateTag làm tươi dữ liệu đã cache sau mutation.⚠️ Server Actions là các PUBLIC endpoint ở bên dưới — luôn validate input và
kiểm tra phân quyền bên trong chúng, đúng như bạn làm với một API route thật.
Server Actions gói gọn ngăn xếp mutation thông thường (API route + client fetch + xử lý state) thành một hàm server duy nhất bạn gọi trực tiếp — câu trả lời của App Router cho form và thay đổi dữ liệu.
Chúng giảm boilerplate, cho phép progressive enhancement, và tích hợp với caching/revalidation, nhưng (như mọi endpoint) đòi hỏi kiểm tra validate và auth bên trong chúng.