[Bug Fix] Next.js 14 App Router 버전, 새로고침 react hydration error 해결

 

Problem

---

렌더링 하이드레이션 과정에서 SSR 값과 CSR 값이 다를 때 발생한다.

이 react-hydration-error의 해결방법은 두 가지가 있다.

  (1) 방법: 클라이언트에서만 렌더링되는 콘텐츠를 useEffect 훅으로 처리

  (2) 방법: 특정 컴포넌트에서 SSR을 비활성화하면 불일치를 방지할 수 있다.

현재 useEffect를 사용할 수 없는 상황이라 나는 (2) 방법을 선택해서 해결하기로 했다.

react-hydration-error가 발생한 화면

 

Solution

---

두번째 방법을 사용하여 'next/dynamic' 패키지로부터 dynamic 메서드를 호출해서 화면에 보여줄 Layout의 SSR을 비화활성화하고 완전한 CSR 컴포넌트로 설정해 렌더링한다.

  let NoSSRComponent: ComponentType<LayoutProps> | null = null;
  
  if (verticalArray.includes(params.option)) {
    NoSSRComponent = dynamic(() => import('./(layout)/VerticalLayout'), {
      ssr: false,
    });
  } else if (colorArray.includes(params.option)) {
    NoSSRComponent = dynamic(() => import('./(layout)/ColorLayout'), {
      ssr: false,
    });
  } else if (horizontalArray.includes(params.option)) {
    NoSSRComponent = dynamic(() => import('./(layout)/HorizontalLayout'), {
      ssr: false,
    });
  } else {
    notFound();
  }

  return (
    <>
      {NoSSRComponent && (
        <NoSSRComponent params={params} modelData={modelData} optionData={optionData} />
      )}
    </>
  );

 

SSR 비활성화를 통해서 해결한 결과, 새로고침을 하더라도 react-hydration-error가 발생하지 않고, 클라이언트의 데이터도 로컬스토리지에 저장되기 때문에 데이터가 날라가지 않는다. 하지만 단점도 생겼는데, 완전한 CSR 컴포넌트이기 때문에 데이터 fetching으로 렌더링 시간이 더 소요된다. 또한 SSG로 동작하지 않기 때문에 UI 흔들림 문제가 발생한다.