[Next + TS] 서버 함수는 초기 렌더링 중에 호출될 수 없..다? #useSuspenseQuery

🚨 에러

Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.

 

서버 함수는 초기 렌더링 중에 호출될 수 없습니다. 이는 fetch 폭포 현상을 일으킬 수 있습니다. 대신 서버 컴포넌트를 사용하여 클라이언트 컴포넌트에 데이터를 전달하는 것이 좋습니다. - GPT

데이터는 렌더링되는데 에러가 뜬다.

 

발생 원인

• 클라이언트 컴포넌트에서 `useSuspenseQuery`로 `Server Action(서버 함수)` 함수를 불러오면 생긴다.
• `queryFn`에 서버 함수를 호출하지 않고, 서버 함수와 똑같은 로직을 복붙해서 실행하면 에러 발생 X
• `useSuspenseQuery`대신 `useQuery`를 사용해도 에러 발생

 

일단 useQuery로 변경하면 해결 가능하지만 그러면 데이터의 return 타입에 undefined가 추가 된다. (union type)

=> 아래에 useQuery로 받은 data 변수 사용 시 전부 undefined에 대한 처리를 해줘야함

 

서버 함수를 호출하지 않고 로직만 가져와서 사용하기

=> 위 방법보다는 덜 번거롭고, 덜 지저분하지만 그래도 찝찝함

---

 

💡 해결 방법

겨우 해결했다. `useSuspenseQuery`를 사용하면서 `Server Action` 까지 사용할 수 있었다.

• initialData를 선언해준다.
• staleTime을 0으로 설정한다. (Provider에서 기본 staleTime이 1분으로 되어있어서 따로 설정함)

예시 코드

  const { data } = useSuspenseQuery<Data>({
    queryKey: ['data'],
    queryFn: () => getData(),
    initialData: {},
    staleTime: 0,
  });

• 반환받을 `data` 타입에 맞춰 초기값을 설정해주니 에러는 해결 되었다. 
• 초기값이 비어있으니 즉시 캐시를 새로 불러올 수 있도록 staleTime을 0으로 설정한다.

그럼 에러 없이 깨끗하게 렌더링이 된다. 

---

📍 정리

에러 내용에선 서버 함수를 초기 렌더링 시 호출해서 문제가 생기는 것처럼 나오지만 실제 해결방법(초기값 세팅)은 좀 다르게 해결한 것 같아서 찝찝하다. 이유는 모르겠다..