(24/03/14)

export default async function AssistantLayout({
    children
}: Readonly<{ children: React.ReactNode }>) {
    const queryClient = new QueryClient();
    await queryClient.prefetchQuery({
        queryKey: ['assistant'],
        queryFn: getAssistants,
    })
    const dehydratedState = dehydrate(queryClient);
    return (
        <>
            <HydrationBoundary state={dehydratedState}>
                <p>assistant</p>
                {children}
            </HydrationBoundary>

        </>
    )
}

[코드 1] src/app/assistant/layout.tsx

const baseURL = process.env.API_BASE_URL || "<http://localhost:3000>";

export const getAssistants = async ({ queryKey }: { queryKey: [string] }) => {
    const [_1] = queryKey;
    console.log("_1", _1);
    const res = await fetch(`${baseURL}/api/assistant/list`, {
        next: {
            tags: [_1],
        },
    });
    console.log("getAssistants 실행");
    if (!res.ok) {
        throw new Error("error");
    }
    return res.json();
};

export const getThread = async () => {
    const res = await fetch("/api/assistant/thread/create");
    if (!res.ok) {
        throw new Error("error");
    }
    return res.json();
};

[코드 2]src/app/api/assistant/assistantAPI.ts

서버컴포넌트에서 미리 데이터를 fetch하기위해 prefetchQuery를 사용하고있었다.

하지만 이상하게 계속 getAssistants함수가 실행되지 않았고 그래가지고 원인을 파악을 하려하였다.

그래서

원래는 아래의 getThread함수처럼 fetch url에 앞에 부분을 붙이지 않았는데 확인해보니

URL은 상대경로로되어있고 클라이언트 사이드에서 실행되는건 문제가 없지만 만약에 코드가 서버사이드에서 실행되는 경우는 서버는 자기 자신을 가리키는 올바른 호스트 이름을 알지 못한다고 한다

그래서 서버사이드에서 실행될 때는 전체 URL을 명시해야한다고하여서 명시해줄수있게 [코드 2]의 윗부분처럼 baseURL을 설정해주어야 한다.