서버사이드렌더링 문제

NEXT.js를 사용하다보면 기존 REACT.js에서와 다른 문제가 발생한다.
어떤 문제냐면 react.js는 CSR만 사용하다보니 서버에서 렌더링할 일이 없었는데,
NEXT.js에서는 서버에서 렌더링할 때 클라이언트와 다른 환경이다보니 발생하는 오류가 있다.
이 오류를 해결하는 것은 처음에 골치였는데 고민 끝에 클라이언트로 왔을 때 체크하는 방법으로 해결하였다.

---

window 오류

위 처럼 윈도우가 존재하지 않는 환경은 서버환경이어서 문제가 생긴다.
이를 해결하기 위해

export function useHasMounted() {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  return hasMounted;
}

만들었다.

원리는 useEffect는 mount시에 돌아가기때문에 true가 되는 순간부터는 이미 마운트 된 것이고, 이 원리를 사용하여 클라이언트 시에서만 사용할 수 있는 함수를 구성할 수 있다.

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  

여기서

  const hasMounted = useHasMounted();
const [windowWidth, setWindowWidth] = useState(
  hasMounted ? window.innerWidth : 0
);

이렇게 업그레이드 하였다.

마무리

이 문제가 여러번 발생하다보니 해결할 수 있었다.
서버사이드 렌더링에 대해 더 깊은 공부가 되었고, CSR, SSR의 중요성에 대해 알게 되었다.