[Next.js] Next.js Server Actions

13.4 버전 이상부터는 서버 API 기능을 page.js 안에 클라이언트 컴포넌트와 함께 작성하여 처리할 수 있게 되었다.

글을 작성하는 기능을 구현한다고 할 때, 다음과 같이 코드를 작성할 수 있다.

import { connectDB } from "@/utils/database";

export default async function Write() {
  async function handleSubmit(formData) {
    "use server"
    const db = (await connectDB).db('forum')
    await db.collection('post_test').insertOne({title: formData.get('title')})
    revalidatePath('/write2')
  }

  return (
    <div>
      <form action={handleSubmit}>
        <input name="title"></input>
        <button type="submit">완료</button>
      </form>
    </div>
  );
}

• 이와 같이 클라이언트 컴포넌트가 작성된 파일에 "use server"라는 키워드와 함께 함수를 추가해주면, 이 함수는 서버 API 기능을 하는 함수로서(=> 서버코드) 작동한다.
• 해당 함수를 클라이언트 사이드에서 호출할 때는 action 속성에 넣어서 폼 전송 시 실행되도록 하면 된다.
• revalidatePath() : 폼 전송 시 자동으로 새로고침이 되지 않기 때문에 사용
  • router.refresh()나 서버 컴포넌트일 경우 revalidateTag()를 사용할 수도 있지만, 이것들과 다르게 바뀐 부분만 SPA처럼 보여준다는 장점이 있다.