Next.js 도입시 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이로 인한 이슈 해결하기(useEffect 훅 사용하기)

Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 지원하는데, 이는 초기 페이지 로딩 속도를 향상시키고, SEO 최적화를 돕는 등 여러 가지 장점이 있다.

하지만 이러한 장점들과 함께 문제점도 발생하는데, 기존의 프로젝트에서는 window나 document와 같은 브라우저 전용 객체에 접근하는 과정에서 에러가 생기는 경우가 많았다.

해결 방법

이 문제를 해결하기 위해 useEffect 훅을 사용하여 클라이언트 사이드에서만 해당 코드가 실행되도록 하였다.

useEffect는 컴포넌트가 렌더링을 마친 후에 실행되므로, 이를 이용하면 서버 사이드에서는 실행되지 않고, 클라이언트 사이드에서만 실행되도록 할 수 있다.

const [isClient, setIsClient] = useState(false);

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

위의 코드는 클라이언트 사이드에서만 실행되는 useEffect 훅을 사용하여 isClient라는 상태를 true로 설정한다. 이렇게 하면, 이 컴포넌트가 클라이언트 사이드에서만 렌더링되도록 보장할 수 있다.

또한 useEffect 훅은 모달 컴포넌트가 렌더링될 때 필요한 DOM 요소를 준비하고, 컴포넌트가 언마운트될 때 이를 제거하도록 할 수도 있다.

useEffect(() => {
    const el =
      document.getElementById('modal-root') || document.createElement('div');
    if (!document.getElementById('modal-root')) {
      el.id = 'modal-root';
      document.body.appendChild(el);
    }
    setModalRoot(el);

    return () => {
      if (!document.getElementById('modal-root')) {
        document.body.removeChild(el);
      }
    };
  }, []);

이 부분은 모달이 클라이언트 사이드에서 렌더링될 때 돔 요소를 찾거나, 없으면 새로 생성해서 body에 추가하도록 하였다.