같은 코드가 서버에서 한 번, 브라우저에서 한 번 실행된다. 그 경계에서 생기는 문제는 대개 에러로 드러나지 않고 로그에만 쌓인다. 이 시리즈는 그런 문제를 하나씩 붙잡고 원인을 찾아 내려간 기록이다.
◆ SERIES · 1 POSTS
렌더링 경계
Server Functions cannot be called during initial render. 화면에는 멀쩡한데 로그에만 쌓이던 에러 메시지에서 시작해 답이 나올 때까지 React Query와 React, Next.js의 소스를 따라 내려간 기록. 중간에 내가 틀리게 짚었던 것도 수치로 확인해 함께 적었다
README
01 ITEMS
전체 글
in order
01
렌더링 경계[1]: Server Functions cannot be called during initial render
DataDog에 주 3,000건씩 쌓이던 에러를 추적했다. useSuspenseQuery가 커밋 전 렌더 단계에서 queryFn을 실행하고, 그 안에 Server Function이 들어 있던 것이 원인이었다. useQuery로 바꾸라는 조언 대신 use server 파일에서 읽기 함수를 분리해 에러를 0건으로 만들었지만, 같은 샌드박스에서 30회를 측정하자 요청은 60회가 나왔다. 서버와 브라우저의 queryClient가 다르기 때문이었다.