06-4_Server_Actions

[로컬] [원격 서버] add(2, 3) ──── 네트워크 ────> 실제 add 함수 실행 ↑ ↓ 5 <──── 네트워크 ──── 결과 반환

// tRPC 서버 const appRouter = router({ addTodo: procedure .input(z.object({ text: z.string() })) .mutation(async ({ input }) => { return await db.todos.create({ text: input.text }); }), }); // tRPC 클라이언트 - 타입이 자동 추론됨 const result = await trpc.addTodo.mutate({ text: "새 할 일" });

GET /users/123 HTTP/1.1 → "123번 사용자 데이터를 주세요" POST /users HTTP/1.1 → "새 사용자를 만들어주세요"

// 수동 RPC: 직접 fetch로 구현 async function addTodo(text) { const response = await fetch('/api/todos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text }) }); return response.json(); }

// actions.ts 'use server'; export async function addTodo(formData: FormData) { const text = formData.get('text') as string; await db.todos.create({ text }); revalidatePath('/todos'); }

// TodoForm.tsx import { addTodo } from './actions'; export function TodoForm() { return ( <form action={addTodo}> <input name="text" /> <button type="submit">추가</button> </form> ); }

[빌드 전] [빌드 후] 'use server'; // 서버: 실제 함수 유지 export async function addTodo() { export async function addTodo() { await db.todos.create(...); await db.todos.create(...); } } // 클라이언트: 스텁으로 교체 export async function addTodo() { return fetch('/_actions/abc123', { method: 'POST', body: ... }); }

POST /_next/...actions/abc123xyz Content-Type: multipart/form-data ------boundary Content-Disposition: form-data; name="text" 새 할 일 ------boundary--

[서버 → 클라이언트 방향] 'use client' 컴포넌트 → 서버에서 렌더링될 때 "참조"로 표현 → 클라이언트에서 실제 컴포넌트로 복원 [클라이언트 → 서버 방향] 'use server' 함수 → 클라이언트에서 "스텁"으로 표현 → 호출하면 서버의 실제 함수 실행

┌─────────────────────────────────────────────────┐ │ 서버 │ │ ┌─────────────┐ ┌─────────────────┐ │ │ │ Server │ │ Server Actions │ │ │ │ Components │ │ (데이터 쓰기) │ │ │ │ (데이터 읽기)│ │ │ │ │ └──────┬──────┘ └────────▲────────┘ │ │ │ │ │ ├─────────┼────────────────────────┼──────────────┤ │ │ RSC Payload │ RPC 호출 │ │ ▼ │ │ │ ┌─────────────────────────────────────────┐ │ │ │ 클라이언트 │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │ Client Components │ │ │ │ │ │ - UI 렌더링 │ │ │ │ │ │ - 이벤트 핸들링 │ │ │ │ │ │ - Server Actions 호출 │ │ │ │ │ └─────────────────────────────────┘ │ │ │ └─────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘

<form action={addTodo}> <input name="text" /> <button type="submit">추가</button> </form>

[JavaScript 비활성화 시] form submit → 브라우저 기본 동작 → 페이지 새로고침 [JavaScript 활성화 시] form submit → React 인터셉트 → fetch 요청 → UI 업데이트 (새로고침 없음)

'use client'; import { useActionState } from 'react'; import { addTodo } from './actions'; function TodoForm() { const [state, formAction, isPending] = useActionState(addTodo, null); return ( <form action={formAction}> <input name="text" disabled={isPending} /> <button disabled={isPending}> {isPending ? '추가 중...' : '추가'} </button> {state?.error && <p className="error">{state.error}</p>} </form> ); }

// actions.ts 'use server'; export async function addTodo(prevState: any, formData: FormData) { const text = formData.get('text') as string; if (!text.trim()) { return { error: '내용을 입력해주세요' }; } try { await db.todos.create({ text }); revalidatePath('/todos'); return { success: true }; } catch (e) { return { error: '저장에 실패했습니다' }; } }

'use client'; import { useOptimistic } from 'react'; function TodoList({ todos, addTodo }) { const [optimisticTodos, addOptimisticTodo] = useOptimistic( todos, (state, newTodo) => [...state, { ...newTodo, pending: true }] ); async function handleSubmit(formData) { const text = formData.get('text'); addOptimisticTodo({ id: Date.now(), text }); // 즉시 UI 업데이트 await addTodo(formData); // 실제 서버 요청 } return ( <> <ul> {optimisticTodos.map(todo => ( <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}> {todo.text} </li> ))} </ul> <form action={handleSubmit}> <input name="text" /> <button>추가</button> </form> </> ); }

'use server'; export async function deletePost(postId: string) { // ❌ 잘못된 예: 인증 없이 바로 삭제 await db.posts.delete(postId); } export async function deletePost(postId: string) { // ✅ 올바른 예: 인증 확인 const session = await getSession(); if (!session) { throw new Error('로그인이 필요합니다'); } const post = await db.posts.find(postId); if (post.authorId !== session.userId) { throw new Error('권한이 없습니다'); } await db.posts.delete(postId); }

'use server'; import { z } from 'zod'; const TodoSchema = z.object({ text: z.string().min(1).max(500), }); export async function addTodo(formData: FormData) { const result = TodoSchema.safeParse({ text: formData.get('text'), }); if (!result.success) { return { error: result.error.flatten() }; } await db.todos.create({ text: result.data.text }); }

1984년 RPC ↓ "원격 함수를 로컬처럼 호출" ↓ 2024년 Server Actions "서버 함수를 클라이언트에서 호출"

// 하나의 파일에서 읽기/쓰기 모두 처리 import { getTodos, addTodo } from './actions'; export default async function TodoPage() { const todos = await getTodos(); // Server Component: 데이터 읽기 return ( <div> <ul> {todos.map(todo => <li key={todo.id}>{todo.text}</li>)} </ul> <form action={addTodo}> {/* Server Action: 데이터 쓰기 */} <input name="text" /> <button>추가</button> </form> </div> ); }