Next.js Server Actions giúp loại bỏ các API Route cho các form đơn giản

Next.js hiện cho phép các nhà phát triển gọi các hàm chỉ chạy trên server trực tiếp từ một component, loại bỏ nhu cầu tạo các API route riêng biệt cho các tác vụ hàng ngày như gửi form. Bằng cách sử dụng tính năng Server Actions mới, một form HTML duy nhất có thể kích hoạt mã backend mà không cần một lệnh gọi fetch trung gian, giúp giảm bớt mã nguồn rườm rà (boilerplate) và thắt chặt sự liên kết giữa front-end và back-end.

Tại sao cách làm cũ lại cảm thấy nặng nề

Trong một ứng dụng React hoặc Next.js điển hình, một form "tạo dự án" đơn giản sẽ kích hoạt một chuỗi các bước: một tệp API route, một yêu cầu fetch từ trình duyệt, xử lý các trạng thái loading và lỗi, các header CORS, và cuối cùng là cập nhật phía client để phản ánh dữ liệu mới. Mỗi bước đều làm tăng thêm số lượng tệp, dòng code và các điểm có thể xảy ra lỗi. Các đội ngũ phải dành thời gian để kết nối các thành phần này lại với nhau ngay cả khi mục tiêu duy nhất chỉ là ghi một bản ghi vào cơ sở dữ liệu.

Server Actions thu hẹp khoảng cách

Server Actions là các hàm bất đồng bộ được đảm bảo chỉ chạy trên server. Việc thêm chỉ thị "use server" vào đầu một tệp sẽ báo cho trình biên dịch giữ mã nguồn đó tránh khỏi bundle trình duyệt, nhờ vậy nó có thể truy cập an toàn vào cơ sở dữ liệu, các thông tin bảo mật (secrets), hoặc bất kỳ tài nguyên nào chỉ dành cho server. Vì hàm này tồn tại trên server, component có thể gọi nó trực tiếp thông qua thuộc tính action trên một phần tử <form> thuần.

Định nghĩa một action

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

Hàm này nhận một đối tượng FormData, xác thực payload, ghi vào cơ sở dữ liệu, sau đó yêu cầu Next.js làm mới trang /dashboard để giao diện người dùng hiển thị dự án mới mà không cần tải lại toàn bộ trang.

Kết nối với UI

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

Khi người dùng nhấp vào nút gửi, trình duyệt sẽ gửi dữ liệu form đến hàm createProject ở phía server. Vì việc này sử dụng hành vi form HTML tiêu chuẩn, việc gửi dữ liệu vẫn hoạt động ngay cả khi JavaScript chưa kịp tải xong, giúp cải thiện hiệu suất cảm nhận được trên các kết nối chậm.

Những gì các đội ngũ nhận được

• Ít tệp hơn – Không cần các tệp pages/api hoặc app/api riêng biệt cho mỗi endpoint.
• Ít kết nối hơn – Không cần các lệnh gọi fetch thủ công, không cần xử lý CORS một cách tường minh.
• Tính an toàn kiểu dữ liệu (type safety) tích hợp sẵn – Chữ ký hàm (function signature) được chia sẻ giữa server và client, nhờ đó TypeScript có thể phát hiện các lỗi không khớp sớm.
• Lợi thế về hiệu suất – Yêu cầu được gửi trực tiếp đến hàm server, bỏ qua một bước nhảy mạng (network hop) bổ sung mà một lệnh gọi fetch phía client sẽ gây ra.

Các giới hạn và lưu ý

Server Actions vẫn là một tính năng mới. Chúng chỉ có thể là các hàm async được đánh dấu với "use server", và chúng không thể trả về các đối tượng JavaScript tùy ý cho client; chúng phải kết thúc bằng một lệnh redirect, một lệnh revalidation, hoặc một phản hồi thông thường. Việc debug có thể cảm thấy khác biệt vì ngăn xếp cuộc gọi (call stack) nhảy từ trình duyệt sang runtime của server, điều này có thể gây bất ngờ cho các nhà phát triển đã quen với nhật ký (logs) của các API route truyền thống. Ngoài ra, các quy trình làm việc phức tạp liên quan đến nhiều microservices hoặc cần các mã trạng thái HTTP chi tiết có thể vẫn yêu cầu một API endpoint truyền thống.

Những điều cần theo dõi

Next.js có khả năng sẽ mở rộng API Server Actions trong các bản phát hành sắp tới, bổ sung hỗ trợ cho nhiều loại phản hồi hơn và tích hợp công cụ tốt hơn. Những người dùng sớm nên theo dõi nhật ký thay đổi (changelog) của framework và phản hồi từ cộng đồng để đánh giá độ ổn định trước khi đưa các tính năng quan trọng (mission-critical) vào lộ trình này. Việc theo dõi kích thước bundle và các chỉ số server-rendering cũng có thể cho thấy liệu việc giảm mã nguồn phía client có mang lại lợi ích về độ trễ có thể đo lường được cho các mô hình lưu lượng truy cập cụ thể của bạn hay không.

Tóm lại

Bằng cách cho phép một component gọi trực tiếp một hàm chỉ chạy trên server, Next.js Server Actions loại bỏ lớp trung gian vốn đã làm cồng kềnh các dự án React từ lâu. Kết quả là mã nguồn sạch hơn, các vòng lặp dữ liệu (round-trips) nhanh hơn và trải nghiệm nhà phát triển mượt mà hơn—miễn là các ràng buộc hiện tại của tính năng này phù hợp với nhu cầu của dự án.