Server Actions

Server Actions를 활용한 폼 처리와 데이터 변경을 학습합니다.

⚡ Server Actions란?

서버에서 실행되는 비동기 함수로, 폼 처리와 데이터 변경을 간단하게 처리할 수 있습니다.'use server' 디렉티브로 정의합니다.

// Server Action 정의
async function createPost(formData: FormData) {
  'use server';
  
  const title = formData.get('title');
  await db.post.create({ data: { title } });
  revalidatePath('/posts');
}

// 사용
<form action={createPost}>
  <input name="title" />
  <button type="submit">Create</button>
</form>

📝 Server Action 폼 예제

폼 제출 시 Server Action이 실행됩니다.

🔧 Server Actions의 장점

✓Progressive Enhancement: JavaScript 없이도 동작
✓타입 안정성: TypeScript 완벽 지원
✓자동 직렬화: FormData 자동 처리
✓재검증: revalidatePath/Tag로 캐시 갱신
✓보안: 서버에서만 실행

📊 Server Actions vs API Routes vs Client-side fetch

특성	Server Actions	API Routes	Client Fetch
주 용도	폼 처리, Mutation	RESTful API	클라이언트 요청
타입 안정성	✅ 완벽	⚠️ 수동	⚠️ 수동
Progressive	✅ 지원	❌ 미지원	❌ 미지원
재검증	✅ 내장	⚠️ 수동	⚠️ 수동

🎯 사용 패턴

인라인 정의

<form action={async (formData) => { 'use server'; // ... }}/>

별도 파일

// actions.ts 'use server'; export async function create() { }

useFormState 사용

const [state, formAction] = useFormState( serverAction, initialState );

🔄 재검증 옵션

revalidatePath

특정 경로의 캐시 재검증

revalidatePath('/posts')

revalidateTag

특정 태그의 캐시 재검증

revalidateTag('posts')

redirect

다른 페이지로 리다이렉트

redirect('/posts')

✅ Best Practices

• 폼 처리에는 Server Actions 우선
• 입력 검증은 서버에서 수행
• 에러 처리 명확히 하기
• 재검증으로 UI 최신 유지
• 낙관적 업데이트 고려

⚠️ 주의사항

• 직렬화 가능한 데이터만 반환
• 클로저 사용 시 주의
• 무한 재검증 방지
• 보안 검증 필수
• 큰 파일 업로드는 별도 처리