[nextjs] Server Action

How use it

클라이언트에서 서버의 함수를 호출할 수 있는 기능입니다. 해당 함수는 아래 3가지 방법으로 호출할 수 있습니다.

• form의 action
• formAction
• react의 startTansition

1. 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>
  )
}

2. 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>
  );
}

3. React의 startTransition 사용하기

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

// app/actions.js
'use server'; // client-component 파일에서 server action 직접 정의할 수 없기 때문에, 따로 파일을 만들어야합니다.
  
export async function addItem(id) {
  await addItemToDb(id);
  revalidatePath(`/product/${id}`);
}
 
// app/components/example-client-component.js
'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>
  );
}