yarn build
했을 경우 발생하는 Error occurred prerendering page Error
3시간 동안 찾아본 결과
사전 렌더링 오류가 발생할 수 있는 여러 에러 중 usesearchParams()
를 Suspense
경계 없이 사용했을 경우 발생한 에러였다.
해결방법
아래의 사진처럼 Product 구성 요소 내에서 useSearchParams를 사용하고 있었고 Suspense를 사용하여 래핑했는데 문제가 해결되었습니다.
공식 문서에 나와있는 또 다른 방법은 force-dynamic 을 사용하는 것이다. 이 방식은 강제로 렌더링을 지정해주는 방식이다. dynamic은 알다시피 SSR로 동작하기 때문에 TTFB(Time to first byte)가 느려지는 단점이 있다
Suspense란 무엇인가
기본 리액트에서도 지원하고, 특정 컴포넌트의 렌더링이 완료되기 전까지 보여줄 로딩 화면을 지정할 수 있는 컴포넌트이다. 용량이 큰 이미지 파일을 다운받는 등 렌더링이 오래 걸릴 때, array 순회가 오래 걸 릴 때, 렌더링 도중에 보여줄 가벼운 컴포넌트를 지정해둠으로써 사용자 경험을 높힐 수 있다. Next JS 13 app dir에서는 fetch, promise 작업 시에도 사용하기 좋다