Server Action là gì

Giờ bạn đã có thể đọc dữ liệu trên máy chủ. Đến lúc tìm hiểu nửa còn lại: thay đổi dữ liệu.

Mãi đến gần đây, việc lưu một dòng văn bản vẫn cần khá nhiều thao tác rườm rà. Bạn viết một endpoint:

// app/api/items/route.js
export async function POST(request) {
    const body = await request.json();
    saveItem(body.text);
    return Response.json({ ok: true });
}

…sau đó gọi hàm này từ trình duyệt:

await fetch('/api/items', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
});

Cần hai tệp, một URL, một phương thức, các header và JSON ở cả hai chiều để chuyển một chuỗi từ biểu mẫu vào cơ sở dữ liệu.

Một Server Action xóa tất cả nội dung đó. Viết một hàm bất đồng bộ trong tệp có dòng đầu tiên là 'use server':

// app/actions.js
'use server';

import { saveItem } from '../lib/db';

export async function addItem(formData) {
    saveItem(formData.get('text'));
}

…và chuyển hàm (function) đó cho một biểu mẫu:

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

Vậy là xong. Có ba chi tiết đáng chú ý:

• 'use server' phải nằm ở dòng đầu tiên của tệp: đây là loại chỉ thị giống 'use client', nhưng có tác dụng ngược lại. Chỉ thị này cho biết mọi thứ được xuất ở đây đều chạy trên máy chủ.
• Phần thân của hàm không bao giờ đến trình duyệt. Thông tin đăng nhập cơ sở dữ liệu của bạn an toàn bên trong hàm: trình duyệt chỉ nhận được một tham chiếu để gọi.
• Bạn không cần viết URL. Next.js tạo endpoint cho bạn; action={addItem} là phần kết nối.

Một điểm khác với phần Cơ bản: các ô nhập liệu trong biểu mẫu này không được kiểm soát. Không có useState, không có value, không có onChange: trình duyệt giữ văn bản, còn thuộc tính name giúp action tìm thấy văn bản khi bạn gửi biểu mẫu.