Updating Data 데모
Next.js App Router에서 Server Functions / Server Actions를 활용한 다양한 데이터 업데이트 패턴을 직접 체험할 수 있습니다. 각 데모는 실제 Server Action 동작을 시뮬레이션합니다.
파일 구조
updating-data/ ├── layout.tsx ├── page.tsx ← 현재 페이지 (인덱스) ├── forms/ ← Form + Server Action ├── event-handlers/ ← onClick + Server Action ├── pending-state/ ← useActionState ├── refreshing/ ← refresh() ├── revalidating/ ← revalidatePath / revalidateTag ├── redirecting/ ← redirect ├── cookies-demo/ ← cookies() API └── use-effect/ ← useEffect + startTransition
Forms + Server Action
<form action={serverFn}>으로 Server Action을 바인딩하고 FormData가 자동 수집되는 과정을 체험합니다.
Event Handlers (Like Button)
onClick 이벤트 핸들러에서 Server Action을 호출하고 useState로 UI를 업데이트하는 패턴을 체험합니다.
useActionState (Pending State)
useActionState 훅으로 pending 상태를 관리하고, 로딩 인디케이터를 표시하는 패턴을 체험합니다.
Refreshing (refresh())
Server Action 내에서 refresh()를 호출하여 클라이언트 라우터를 갱신하는 과정을 체험합니다.
Revalidating (revalidatePath / revalidateTag)
Server Action에서 revalidatePath 또는 revalidateTag로 캐시를 무효화하고 최신 데이터를 표시합니다.
Redirecting (redirect)
Server Action에서 revalidatePath 후 redirect로 다른 페이지로 이동하는 패턴을 체험합니다.
Cookies (get/set/delete)
Server Action 내에서 cookies() API로 쿠키를 조작하고 페이지가 재렌더링되는 과정을 체험합니다.
useEffect + Server Action
컴포넌트 마운트 시 useEffect + startTransition으로 Server Action을 자동 호출하는 패턴을 체험합니다.
Tip: 모든 데모의 Server Action은 actions.ts 파일에 'use server' 지시어와 함께 정의됩니다. 루트 page.tsx는 Server Component로 유지됩니다.