💧 Hydration, Miss Match (Next 13)

이도경·2023년 10월 24일

React

fRONTeND

목록 보기

12/14

SSR 환경 (Next 13)에서 개발을 하다 문제를 만났어요.
next 공식 doc 과 구글링을 통해 여러 해결법을 참고하여 해결 했어요.

에러 내용은...

(Warning: Expected server HTML to contain a matching next js)

Hydration 이란? (hwahae)

UseEffect로 초기화 ❌

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

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

if(!isClient) return <div/>;

return (
 ...

강제로 클라이언트에서 실행 되도록 하라는 코드인데 사실 Next에서는 use client 라는 기능을 제공하기 때문에 큰 도움이 되지 못했어요. 이미 해당 파일에 포함되어 있기도 했구요.

Disable SSR ✅❓

import dynamic from 'next/dynamic'
 
// 원래 사용하려 했던 컴포넌트 import
const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })
 
export default function Page() {
  return (
    <div>
      <NoSSR />
    </div>
  )
}

공식 문서를 통해 dynamic으로 ssr 컴포넌트를 비활성화 하기로 했어요. miss match 문제는 해결 했답니다. 🥳

하지만... 다른 에러가 발생했어요..

(Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed)

구글링을 통해 에러 원인은 찾았어요.

grammerly 라는 크롬 확장 프로그램 때문이라고 해요..
답변들을 참고하여 suppressHydrationWarning=true 의 값을 상위 컴포넌트에 옵션 추가를 하여 해결은 하였어요!
그런데 Hydration을 무시해버리면 최적화에 좋지않다는 의견이 있어 썩 좋진 않네요. 😒

문제 회피 ✅

구글링 중 로컬에서만 발생한다는 의견들이 있었어요. 배포서버를 통해 확인해보니 사실이더라구요.
그래서 웹 어플리케이션 모드에 따라 값을 조정하기로 했어요.

<body suppressHydrationWarning={process.env.NODE_ENV === 'development'}>
  ...

다음과 같은 빌드 모드에 따라 suppressHydrationWarning 값이 들어가요.
이렇게 에러는 교정하면서 제가 원하던 최적화 문제도 어느정도는 해결한듯 하네요.

이도경

안녕하세용

이전 포스트

🍀 Flutter WebView 도입기 (2) 웹 - 플러터통신

다음 포스트

💧 Hydration, Miss Match (Next 13)

fRONTeND

(Warning: Expected server HTML to contain a matching next js)

UseEffect로 초기화 ❌

Disable SSR ✅❓

(Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed)

문제 회피 ✅

🍀 Flutter WebView 도입기 (2) 웹 - 플러터통신

💶 Next.js Cache 적용

0개의 댓글