nextjs
CHAPTER 14 / 34
읽기 약 2분
SYNTAX
Server Actions 해부: 서버 함수
핵심 개념
"use server"로 서버에서 실행되는 함수를 만듭니다. 폼 제출, DB 작업, API 호출에 사용합니다. API 라우트 없이 서버 로직을 실행합니다.
코드 분석
SERVER ACTIONS
// actions.ts
'use server'
export async function createUnit(data: FormData) {
const model = data.get('model')
// DB에 저장 (서버에서만 실행)
await db.units.create({ model })
}
// page.tsx에서 사용
<form action={createUnit}>
<input name="model" />
<button>생성</button>
</form>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Server Actions' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Server Actions'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Server Actions' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Server Actions' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Server Actions 해부: 서버 함수는 이 3가지만 확실히 잡으세요
1.폼 제출을 API 엔드포인트로 처리하면 별도 route.ts 파일이 필요하고, 클라이언트에서 fetch 코드를 작성해야 합니다
2.'use server' 함수는 클라이언트에서 호출하면 자동으로 서버에서 실행되며, 폼의 action 속성에 직접 바인딩됩니다
3.다음 챕터에서 로딩 상태를 자동으로 처리하는 loading.tsx와 Suspense를 배웁니다
공유하기
진행도 14 / 34