什么是服务端操作

本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 29 课，共 47 课。

现在你可以读取服务器上的数据了。该学习另一半内容了：修改它。

直到最近，保存一行文本还需要繁琐的步骤。你需要编写一个端点：

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

……然后从浏览器中调用它：

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

两个文件、一个 URL、一个方法、请求头，以及双向传输的 JSON，将一个字符串从表单传到数据库。

一个 Server Action 会将它全部删除。在一个文件中编写异步函数，并将 'use server' 作为第一行：

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

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

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

……并将该函数交给表单：

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

就是这些。值得说明的细节有三个：

'use server' 必须是文件的第一行：它和 'use client' 是同类标记，只是方向相反。它表示：这里导出的所有内容都在服务器上运行。
函数体永远不会到达浏览器。你的数据库凭据在函数体中是安全的：浏览器只能获取一个可调用的引用。
你从未写过 URL。Next.js 会为你创建端点；action={addItem} 就是连接方式。

与 Fundamentals 的一个区别是：这些表单输入是非受控的。没有 useState，没有 value，也没有 onChange：浏览器会保留文本，提交时，操作会通过 name 属性找到它。

亲手试试

这节课没有代码挑战。