Skip to content

NextJS:ServerActions

Form 상태 관리, 캐싱, 유효성검사 관련하여 next에서 새롭게 제시하는 solution입니다.

Form 데이터로 서버의 데이터를 변경하고, 중간 API 레이어 없이 서버에서 동작하는 함수를 클라이언트에서 직접 실행시킬 수 있습니다.

Features

  • revalidatePath() or revalidateTag()로 캐시된 데이터 재검증
  • redirect()로 다른 route로 이동
  • cookies() 로 쿠키 set & read
  • useOptimistic()로 optimistic UI 핸들링
  • useFormState() 로 서버에서 발생한 에러 핸들링
  • useFormStatus() 로딩상태 표시

How use it

form의 action 사용하기 

import db from './db'
import { redirect } from 'next/navigation'

async function create(formData: FormData){
  'use serevr'
  const post = await db.post.insert({
    title: formData.get('title'),
    content: formData.get('content'),
  })

  redirect(`/blog/${post.slug}`)
}

export default function Page(){
  return (
    <form action={create}>
      <input type="text" name="title" />
      <textarea name="content" />
      <button type="submit">Submit</button>
    </form>
  )
}

formAction 사용하기 

export default function Page() {
  async function handleSubmit() {
    'use server';
    // ...
  }

  async function submitImage() {
    'use server';
    // ...
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <input type="image" formAction={submitImage} />
      <button type="submit">Submit</button>
    </form>
  );
}

React의 startTransition 사용하기

client component에서 server action을 호출하는 방법

app/actions.js file: 

'use server';  // client-component 파일에서 server action 직접 정의할 수 없기 때문에, 따로 파일을 만들어야합니다.

export async function addItem(id) {
  await addItemToDb(id);
  revalidatePath(`/product/${id}`);
}

app/components/example-client-component.js file: 

'use client';

import { useTransition } from 'react';
import { addItem } from '../actions';

function ExampleClientComponent({ id }) {
  let [isPending, startTransition] = useTransition();

  return (
    <button onClick={() => startTransition(() => addItem(id))}>
      Add To Cart
    </button>
  );
}

Fetching Data on the Server with fetch

useFormStatus

APIs

revalidatePath

revalidateTag

See also

Favorite site

Documentation