Forms + Server Action 데모
<form action={createPost}>을 사용하면 React가 자동으로 FormData를 수집하여 Server Action에 전달합니다. 아래 폼에 값을 입력하고 제출해보세요.
실제 Server Action 폼
핵심 코드
// actions.ts
'use server'
export async function createPost(formData: FormData) {
const title = formData.get('title')
const content = formData.get('content')
// Update data, Revalidate cache
}
// page.tsx
<form action={createPost}>
<input type="text" name="title" />
<textarea name="content" />
<button type="submit">Create</button>
</form>체험 포인트: 폼을 제출하면 페이지가 새로고침되면서 Server Action이 실행됩니다. JS가 로드된 후에는 fetch 기반으로 동작하여 새로고침 없이 처리됩니다.