build error 발생 및 해결과정 (트러블 슈팅 2)

🚨 문제 발생
Vercel 배포를 위해 프로젝트를 빌드하던중 빌드 에러가 발생
몇몇은 에러 메세지를 통해 바로 잡았으나, 메세지를 통해 문제의 원인이 바로 나타나지않는 에러들이 존재.

 

🛠️ 문제 해결 과정
소거법을 이용해 폴더, 파일, 코드들을 하나씩 비활성화 하면서 문제 원인 분석

 

🔥 찾아낸 문제점
1. Next.js는 빌드 타임에 모든 페이지를 사전에 렌더링(SSR) 하기 때문에 서버에서 컴포넌트를 HTML 형태로 렌더링 진행.
✔️ 이 시점에서 클라이언트 사이드 전용 객체를 참조하면 오류가 발생 ➡️ 서버에는 window나 document 같은 객체가 존재하지 않음

2.Session storage 나 useSearchParams 같은 URL 매개변수 훅은 빌드 시점에서 빌드 에러가 발생
✔️ next.js는 ‘use client’를 사용하더라도 서버 사이드 렌더링이라 HTML이 비어 있는 문제가 발생

2. sessionStoage

 

🪙 해결 방법
1. useEffect / typeof window !== undefined 사용하기
- useEffect를 사용하여 렌더링 후 실행
- 조건문에서 typeof window! == undefined 인 경우 체크

2. Suspense 훅 사용하기
특정 구역의 컴포넌트 렌더링을 지연시킬 수 있는 기능을 가진 Suspense훅을 사용하여 데이터가 준비될 때까지 지연시키기
- <Suspense> 훅은 React에서 무언가를 기다릴 때 사용
- childern이 로딩되기 전에 fallback을 보여줄 수 있음

typeof window! == undefined

useEffect

Suspense 훅