🔄 Next.js App Router에서 데이터 업데이트 완전 가이드

🔄 Next.js App Router에서 데이터 업데이트 완전 가이드

Next.js App Router에서는 기존 REST API나 API Route를 만들지 않고도, Server Actions를 사용해 서버에서 직접 데이터를 업데이트할 수 있습니다.
이 방식은 코드량을 줄이고 보안성을 높이며, 서버에서 처리된 결과를 즉시 UI에 반영할 수 있는 장점이 있습니다.

---

✅ Server Action이란?

'use server' 디렉티브를 사용하면 해당 함수는 클라이언트에서 호출되더라도 서버에서 실행되는 함수로 변환됩니다.

// app/lib/actions.ts
'use server';

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  const content = formData.get('content');

  // 여기에 DB INSERT 로직 추가
}

또는 서버 컴포넌트 내부 함수로도 선언 가능합니다:

// app/page.tsx
export default function Page() {
  async function submit(formData: FormData) {
    'use server';
    // DB 저장
  }

  return <form action={submit}>...</form>;
}

---

🧾 HTML <form>에서 Server Action 호출하기

// app/posts/create-form.tsx
import { createPost } from '@/app/lib/actions';

export default function CreateForm() {
  return (
    <form action={createPost}>
      <input type="text" name="title" placeholder="제목" />
      <textarea name="content" placeholder="내용" />
      <button type="submit">작성</button>
    </form>
  );
}

• form의 action 속성에 Server Action을 연결
• form 데이터를 FormData 형태로 자동 전달

---

🖱 클라이언트 컴포넌트에서 Server Action 호출

클라이언트 컴포넌트에서는 formAction 속성을 사용합니다.

'use client';
import { createPost } from '@/app/lib/actions';

export function SubmitButton() {
  return <button formAction={createPost}>등록</button>;
}

• formAction은 버튼 클릭 시 지정된 Server Action을 호출
• type="submit" 버튼과 유사하지만 폼 외부에서도 사용 가능

---

♻️ 캐시 무효화 + 리디렉션 처리

반응형

데이터가 변경된 후 특정 페이지의 캐시를 다시 불러오고, 사용자 경로를 변경할 수 있습니다.

'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  // DB 저장 로직 실행

  revalidatePath('/posts'); // 목록 페이지 캐시 무효화
  redirect('/posts');       // /posts 페이지로 이동
}

• revalidatePath: 지정 경로의 서버 캐시를 무효화하여 최신 데이터로 재요청
• redirect: 서버에서 리디렉션 수행

---

⚠️ 에러 핸들링도 필수

Server Action 내부에서 오류가 발생할 수 있으므로 try/catch 처리로 방어 코드를 작성해야 합니다.

'use server';

export async function createPost(formData: FormData) {
  try {
    const title = formData.get('title');
    // DB 저장 또는 외부 요청
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

---

🧪 간단한 실전 구조 예시

app/
├── lib/
│   └── actions.ts      # Server Action 정의
├── posts/
│   ├── create-form.tsx # <form> 정의
│   └── page.tsx        # 페이지 컴포넌트

---

✅ 요약 정리

기능 사용법

Server Action 생성	'use server' 디렉티브 사용
form에서 호출	<form action={함수}> 사용
클라이언트 버튼에서 호출	<button formAction={함수}> 사용
캐시 무효화	revalidatePath('/url')
리디렉션	redirect('/target')
에러 처리	try/catch 구조로 안전하게

---

 

Next.js, Server Actions, 데이터 업데이트, App Router, FormData, 캐시 무효화, 리디렉션, 클라이언트 호출, 서버 함수, SEO 최적화 10개