핵심 답변
📌 Server Actions는 서버에서 실행되는 비동기 함수로, 클라이언트 코드에서 직접 호출할 수 있습니다. 별도의 API Route 없이 서버 로직(DB 쿼리, 폼 처리 등)을 처리할 수 있습니다.
'use server' 디렉티브로 선언하며, form의 action 속성이나 이벤트 핸들러에서 호출합니다.
예시 코드
typescript
// actions.ts
'use server';
import { revalidatePath } from 'next/cache';
export async function createPost(formData: FormData) {
const title = formData.get('title') as string;
await db.post.create({ data: { title } });
revalidatePath('/posts');
}
// page.tsx (클라이언트에서 호출)
import { createPost } from './actions';
export default function Page() {
return (
<form action={createPost}>
<input name="title" />
<button type="submit">작성</button>
</form>
);
}핵심 용어
📌 'use server' 디렉티브파일 또는 함수 상단에 선언해 해당 코드가 서버에서만 실행됨을 나타냅니다. 클라이언트 번들에 포함되지 않습니다.
📌 revalidatePathServer Action 실행 후 특정 경로의 캐시를 무효화해 최신 데이터를 보여줍니다. 상품 등록, 데이터 수정 후 페이지를 다시 불러올 때 사용합니다.