어제, 너굴의 숲 행사 관련으로 3시간 정도 급하게 프로젝트를 만들었던 적이 있었는데 막판에 Vercel로 배포했더니 계속해서 실패하는 이슈가 있었다.
어떤 이슈였을지 파악해보니 다음과 같은 배포 이슈가 있었다.
해결 방법은 에러 로그에 적혀있긴 하지만, 그래도 정리해두면 좋겠다고 생각해서 기록해두고자 한다.
Vercel의 deploy 로그에도 나와있듯이 에러 해결에 대한 내용은 다음과 같다.
useSearchParams() should be wrapped in a suspense boundary at page "/checkin”.
useSearchParams()라는 훅을 사용하려면 Suspense의 범위 안에 감싸져야 한다고 말한다.
이해는 하지만, ‘왜 꼭 감싸야 하는 걸까?’에 대한 의문이 있어서 다음 줄에 있던 공식 문서를 읽어봤다.
Missing Suspense boundary with useSearchParams
Reading search parameters through
useSearchParams()without a Suspense boundary will opt the entire page into client-side rendering. This could cause your page to be blank until the client-side JavaScript has loaded.
요컨대, useSearchParams()를 Suspense 범위 안에 넣지 않을 경우, 이 Hook이 파라미터를 받는 범위가 필요한 컴포넌트들 한정이 아닌, 보고 있는 페이지 전체를 적용된다.
그러다보니, 전체 페이지를 로드하면서 해당 페이지의 모든 JavaScript 코드가 반영될 때까지는 정상적으로 작동하지 않기 때문에 Suspense를 통해서 범위를 지정해둬야 한다는 것이었다.
Next.JS는 서버 컴포넌트와 클라이언트 컴포넌트의 분리가 명확하기 때문에 서버 컴포넌트 내에서는 useSearchParams()를 쓸 수 없다.
(애초에 Hook이기 때문에 클라이언트 컴포넌트에서만 사용 가능하지만!)
그래서 useSearchParams() 범위가 적용되는 클라이언트 컴포넌트를 Suspense로 감싸는 것으로 훅이 적용되는 범위를 확실하게 하면서, Hook을 통해 JavaScript가 반영되는 범위 또한 최소화하여 보다 빠르게 로딩할 수 있도록 유도하려는 듯 하다.