Server Action이란 무엇인가

이제 서버의 데이터를 읽을 수 있습니다. 이제 절반 남은 작업인 데이터 변경을 다뤄볼 시간입니다.

최근까지 텍스트 한 줄을 저장하는 데에도 놀라울 정도로 많은 형식이 필요했습니다. 다음과 같이 엔드포인트를 작성했습니다:

// 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, method, headers, 그리고 양방향의 JSON으로 폼에서 데이터베이스로 하나의 문자열을 이동합니다.

Server Action을 사용하면 이 모든 것이 필요 없어집니다. 첫 번째 줄이 'use server'인 파일에 async 함수를 작성하세요:

// 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'와 동일한 종류의 표시이지만, 반대 방향을 가리킵니다. 이 파일에서 export된 모든 것은 서버에서 실행된다는 의미입니다.
• 함수 body는 절대로 브라우저에 도달하지 않습니다. 데이터베이스 자격 증명은 그 안에서 안전하게 보호됩니다. 브라우저는 호출할 수 있는 참조만 받게 됩니다.
• URL을 직접 작성할 필요가 없습니다. Next.js가 자동으로 엔드포인트를 생성하며, action={addItem}이 이를 연결해 줍니다.

기초(Fundamentals) 과정과의 한 가지 차이점은 이러한 폼 입력들이 uncontrolled(비제어) 상태라는 점입니다. useState도, value도, onChange도 없습니다. 브라우저가 텍스트를 유지하며, 제출 시 action이 이를 찾는 방식은 바로 name 속성을 통해서입니다.