Next.js : 14.0.4 를 사용중이다.

헤더 컴포넌트에서 세션 스토리지를 사용할려고 했다

{!sessionStorage.getItem('userId') && 
sessionStorage.getItem('audit') &&
<li><a onClick={Logouts}>LogOut</a></li>
}

이런식으로 세션 스토리지를 사용할려고 했다

이런식으로 에러를 보여준다.

1. 원인

• 구글링을 하며 찾아본 경과 원인은 SSR과 CSR의 차이를 제대로 인지하지 못한 상태에서 발생한 에러였다.

1. Next.js 는 다음의 순서로 실행한다 => SSR > CSR 순서로 실행한다
2. SSR : 브라우저의 존재하는 로컬/세션 스토리지 등 을 실행하지 못한다.

   SSR : 나 그거 실행 못하는대?
   개발자 : 이대로 할꺼야!
   SSR : 아 몰라 에러야 배째던가

3. 세션이나 로컬 스토리지를 사용할려면 Next.js에게 SSR 이후 CSR을 진행할때 이 코드를 실행하도록 지시해야 한다.

2. 해결 방법

• CSR 환경 기반에서 실행하는 코드 집단을 분리하는 방식으로 하였다.

if (typeof window !== 'undefined') {
		const userId = sessionStorage.getItem('userId');
		const audit = sessionStorage.getItem('audit');
		isUserCheck = Boolean(userId && audit);
	  }

• 이 상황에서는 window 객체가 존재할때 세션스토리지 관련 코드를 사용한다

• SSR 환경에서는 window 객체는 정의되지 않으니 건너뛰도록 한다

  만약 저렇게 해도 에러가 발생한다면 useEffect로 코드를 수정한다

  const [isUserCheck, setIsUserCheck] = useState(false);
  
     useEffect(() => {
         const userId = sessionStorage.getItem('userId');
         const audit = sessionStorage.getItem('audit');
         setIsUserCheck(Boolean(userId && audit));
     }, []);