Client 컴포넌트에서 Server Actions 사용하기

클라이언트 컴포넌트에서 Server Actions를 사용할 수 있지만, 가끔 문제가 발생할 수 있어요. 이 페이지에서는 그 문제와 해결 방법을 알려드려요.

출처: 문서

본문

클라이언트 컴포넌트에서 Server Actions를 사용할 수 있지만, 가끔 다음과 같은 문제가 발생할 수 있어요.

문제 (Issue)

클라이언트 컴포넌트에서 인라인으로 "use server"가 주석화된 Server Actions를 정의하는 것은 허용되지 않아요.

해결 방법 (Solution)

클라이언트 컴포넌트에서 Server Actions를 사용하려면 다음 중 하나를 할 수 있어요:

상단에 "use server"를 두고 별도의 파일에서 내보내기(export)
Server 컴포넌트에서 props로 내려주기
createAI와 useActions 훅의 조합을 구현해 접근하기

Server Actions and Mutations에 대해 더 알아보세요.

'use server';

import { generateText } from 'ai';
__PROVIDER_IMPORT__;

export async function getAnswer(question: string) {
  'use server';

  const { text } = await generateText({
    model: __MODEL__,
    prompt: question,
  });

  return { answer: text };
}

더 알아보기 (Learn more)

useActions — 클라이언트에서 Server Actions 접근
createAI — AI 프로바이더 생성