Server Actions 예제

← Actions 예제로 돌아가기

🎯 핵심 포인트

✍️ 새 포스트 작성

📝 포스트 수정

취소

✏️ "첫 번째 포스트" 포스트를 수정하고 있습니다.

취소

📝 포스트 목록 (2개)

첫 번째 포스트

수정 중

Server Actions를 사용한 첫 번째 예제입니다.

작성일: 2024년 1월 1일 오전 12:00

두 번째 포스트

수정

서버에서 실행되는 Actions의 강력함을 보여줍니다.

작성일: 2024년 1월 2일 오전 12:00

💡 Server Actions 동작 방식

// 1. 서버 함수 정의
async function createPost(formData: FormData) {
    'use server'; // 🔑 서버에서 실행
    
    const data = formData.get('title');
    await db.create(data); // 서버에서 DB 작업
    revalidatePath('/posts'); // 캐시 무효화
}

// 2. 폼에서 직접 사용
<form action={createPost}>
    <input name="title" />
    <button type="submit">제출</button>
</form>

// ✅ 결과: 
// - 폼 제출 시 자동으로 서버 함수 실행
// - 로딩 상태 자동 관리
// - 완료 후 자동 페이지 재검증