NextJS : Prerendering 쿠키 접근시 오류

문제 : NextJS getCookie의 값으로 화면 렌더링시 발생가능 문제

Text content did not match. Server:  Client:

이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 NextJS는 모든 페이지를 서버에서 프리 렌더링 하여 보여주게 된다. 그렇기 때문에 프리렌더 과정에서 쿠키에 직접접근하여 데이터를 읽어서 화면을 구성하려하면 문제가 발생한다.

 

해결방법 : 

const [user, setUser] = useState();

useEffect(()=>{
	setUser(getCookie("user"));
},[]);

위와 같이 Mounted시점에 쿠키에서 받아서 user에 할당하여 주면 해결할 수 있다.