상태 저장 및 복원

상태 저장 및 복원 (Saving and Restoring States)

AI SDK RSC에서 AI 상태와 UI 상태를 저장하고 복원하는 방법을 설명하는 문서예요.

출처: 문서

본문

경고: AI SDK RSC는 현재 실험 단계(experimental)예요. 프로덕션에서는 AI SDK UI 사용을 권장해요. RSC에서 UI로 마이그레이션하는 방법은 마이그레이션 가이드를 참고하세요.

AI SDK RSC는 AI 상태와 UI 상태를 저장하고 복원하는 편리한 메서드를 제공해요. 이는 매 모델 생성 후 애플리케이션의 상태를 저장하고, 사용자가 그 생성 결과를 다시 방문할 때 상태를 복원할 때 유용해요.

AI 상태 (AI State)

AI 상태 저장 (Saving AI state)

AI 상태는 onSetAIState 콜백으로 저장할 수 있으며, 이 콜백은 AI 상태가 업데이트될 때마다 호출돼요. 아래 예제에서는 생성이 완료(done)로 표시될 때마다 채팅 기록을 데이터베이스에 저장해요.

export const AI = createAI<ServerMessage[], ClientMessage[]>({
  actions: {
    continueConversation,
  },
  onSetAIState: async ({ state, done }) => {
    'use server';

    if (done) {
      saveChatToDB(state);
    }
  },
});

AI 상태 복원 (Restoring AI state)

AI 상태는 createAI 함수가 생성한 컨텍스트 프로바이더에 전달되는 initialAIState prop으로 복원할 수 있어요. 아래 예제에서는 컴포넌트가 마운트될 때 데이터베이스에서 채팅 기록을 복원해요.

import { ReactNode } from 'react';
import { AI } from './ai';

export default async function RootLayout({
  children,
}: Readonly<{ children: ReactNode }>) {
  const chat = await loadChatFromDB();

  return (
    <html lang="en">
      <body>
        <AI initialAIState={chat}>{children}</AI>
      </body>
    </html>
  );
}

UI 상태 (UI State)

UI 상태 저장 (Saving UI state)

UI 상태는 내용이 아직 직렬화 가능하지 않기 때문에 직접 저장할 수 없어요. 대신 AI 상태를 프록시로 사용해 UI 상태에 대한 세부 정보를 저장하고, 필요할 때 UI 상태를 복원하는 데 사용할 수 있어요.

UI 상태 복원 (Restoring UI state)

UI 상태는 AI 상태를 프록시로 사용해 복원할 수 있어요. 아래 예제에서는 컴포넌트가 마운트될 때 AI 상태에서 채팅 기록을 복원해요. onGetUIState 콜백을 사용해 SSR 이벤트를 듣고 UI 상태를 복원해요.

export const AI = createAI<ServerMessage[], ClientMessage[]>({
  actions: {
    continueConversation,
  },
  onGetUIState: async () => {
    'use server';

    const historyFromDB: ServerMessage[] = await loadChatFromDB();
    const historyFromApp: ServerMessage[] = getAIState();

    // If the history from the database is different from the
    // history in the app, they're not in sync so return the UIState
    // based on the history from the database

    if (historyFromDB.length !== historyFromApp.length) {
      return historyFromDB.map(({ role, content }) => ({
        id: generateId(),
        role,
        display:
          role === 'function' ? (
            <Component {...JSON.parse(content)} />
          ) : (
            content
          ),
      }));
    }
  },
});

더 자세히 알아보려면 Next.js 애플리케이션에서 상태를 영속화하고 복원하는 예제를 확인하세요.

다음으로, useActions와 useUIState 같은 @ai-sdk/rsc 함수를 사용해 대화형 다단계 인터페이스를 만드는 방법을 배우게 될 거예요.

상태 저장 및 복원