hydration Error, 서버에서 useState내부함수가 실행되는 문제, use hook

nexjts hydration 이란??

Text content does not match server-rendered HTML

While rendering your application, there was a difference between the React tree that was pre-rendered from the server and the React tree that was rendered during the first render in the browser (hydration).

https://nextjs.org/docs/messages/react-hydration-error

일반적인 원인

1. HTML 태그의 잘못된 중첩
1. <p> 다른 태그 에 중첩됨 <p> 
2. <div> 태그 에 중첩됨 <p> 
3. <ul> or <ol> nested in a <p> tag
4. 1. Interactive Content cannot be nested (<a> nested in a <a> tag, <button> nested in a <button> tag, etc.) 대화형 콘텐츠는 중첩될 수 없습니다(<a>가 <a> 태그에 중첩되거나, <button>이 <button> 태그에 중첩되는 경우).

잘못된 중첩이 하이드레이션 에러를 유발하는 이유

5. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 불일치: SSR에서는 브라우저가 중첩된 a태그를 허용하지 않는 방식으로 HTML을 파싱할 수 있습니다. 예를 들어, 내부 a태그를 무시하거나 외부 a태그를 닫을 수 있습니다. 반면, CSR에서 React는 Virtual DOM을 생성할 때 중첩된 구조를 그대로 유지할 수 있습니다.
6. React의 재조정(Reconciliation) 과정: 하이드레이션 단계에서 React는 서버에서 생성된 HTML과 클라이언트에서 생성된 Virtual DOM을 비교합니다. 구조가 다르면 React는 이를 불일치로 인식하고 하이드레이션 에러를 발생시킵니다.
7. 브라우저의 자동 교정: 일부 브라우저는 잘못된 HTML 구조를 자동으로 교정하려고 시도합니다. 이 과정에서 서버에서 생성된 HTML과 클라이언트에서 React가 기대하는 구조 사이에 차이가 발생할 수 있습니다.
 

// 서버 사이드에서 렌더링된 HTML (브라우저에 의해 자동 교정될 수 있음)
<a href="/outer">
  Outer Link
  <a href="/inner">Inner Link</a>
</a>

// React 컴포넌트 (클라이언트 사이드에서 렌더링)
function NestedLinks() {
  return (
    <a href="/outer">
      Outer Link
      <a href="/inner">Inner Link</a>
    </a>
  );
}

이 경우, 서버에서 생성된 HTML은 브라우저에 의해 다음과 같이 해석될 수 있습니다:

<a href="/outer">Outer Link</a>
<a href="/inner">Inner Link</a>

그러나 React는 원래의 중첩 구조를 기대합니다. 이러한 불일치로 인해 하이드레이션 에러가 발생합니다.
 

2. typeof window !== 'undefined'
렌더링 로직과 같은 체크 사용

3. 렌더링 로직에서 windowlocalStorage
브라우저 전용 API 사용

4. Date()
렌더링 로직의 생성자 와 같은 시간 종속 API 사용

5. 브라우저 확장 프로그램
HTML 수정하기

6. 잘못 구성된 CSS-in-JS 라이브러리
1. 코드가 공식 예제를 따르고 있는지 확인하세요.

7. Cloudflare 자동 축소 와 같이 html 응답을 수정하려는 잘못 구성된 Edge/CDN

문제상황

"use client"
import React, { createContext, useContext, useEffect, useState } from 'react';
import dayjs from 'dayjs';


const SearchContext = createContext();

export const SearchProvider = ({ children }) => {
  const initialState = () => {
    let savedData = null;
    if (typeof window !== 'undefined' && window.sessionStorage) { // <- 이부분입니다.
      savedData = sessionStorage.getItem('searchData');
    }
    return JSON.parse(savedData)
  };

  const [searchData, setSearchData] = useState(initialState);

  useEffect(() => {
    sessionStorage.setItem('searchData', JSON.stringify(searchData));
    console.log(searchData);
    console.log(sessionStorage.getItem('searchData'));
  }, [searchData]);

  return (
    <SearchContext.Provider value={{ searchData, setSearchData }}>
      {children}
    </SearchContext.Provider>
  );
};

export const useSearch = () => useContext(SearchContext);

const MainNav = dynamic(() => import("@/components/mainNav/MainNav"), {
  ssr: false,
});

 const [hasMounted, setHasMounted] = useState(false);

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

  if (hasMounted) {
    return [storedValue, setValue] as const;
  }

  const [searchData, setSearchData] = useState(null);

  useEffect(() => {
    if (!searchData) return;
    sessionStorage.setItem('searchData', JSON.stringify(searchData));
    console.log(searchData);
    console.log(sessionStorage.getItem('searchData'));
  }, [searchData]);

export default function Home() {
  const { searchData, setSearchData } = useSearch();
  useEffect(() => {
    const initialState = () => {
      let savedData = null;
      if (typeof window !== "undefined" && window.sessionStorage) {
        savedData = sessionStorage.getItem("searchData");
      }
      return JSON.parse(savedData);
    };
    setSearchData(initialState);
  }, []);
  console.log("searchData", searchData);
  const { data, status } = useSession();

1. 애초에 클라이언트 사이드에서만 실행되는 코드인데 useEffect 밑의 로직을 검증할 필요가없음 만일 서버에서 해당 코드가 실행된다면 클라이언트사이드에만 실행되도록 구조를 변경할 것

f (typeof window !== 'undefined' && window.sessionStorage) { // <- 이부분입니다.
      savedData = sessionStorage.getItem('searchData');
 }

1. 서버사이드 랜더링시 리엑트 훅이 절대 실행되지 않는건아님. 정확히 말하면 useState훅 안의 함수는 실행된다.

const getSessionBrowser = () => sessionStorage.getItem('sessionId');

export default function ClientC() {
  const [sessionId, setSessionId] = useState<null | string>(getSessionBrowser());

  return <div>홈 페이지 {sessionId}</div>;
}

✓ Compiled in 936ms (725 modules)
 ⨯ src\app\(after-login)\test\components\ClientC.tsx (4:48) @ getItem
 ⨯ ReferenceError: sessionStorage is not defined
    at getSessionBrowser (test/components/ClientC.tsx:11:46)
    at ClientC (test/components/ClientC.tsx:13:87)
digest: "4268536241"
  2 | import { useEffect, useState } from 'react';
  3 |
> 4 | const getSessionBrowser = () => sessionStorage.getItem('sessionId');
    |                                                ^

• 왜 실행되는가??

export default function ClientC() {
  const [sessionId, setSessionId] = useState<null | string>('text');

  useEffect(() => {
    setTimeout(() => {
      setSessionId('업데이트된 텍스트');
    }, 2000);
  }, []);

  return (
    <div>
      <h1>홈 페이지</h1>
      <div>
        {/* sessionId가 업데이트될 때마다 DOM에 변경 사항이 반영됨 */}
        <p>현재 세션 ID: {sessionId}</p>
      </div>
    </div>
  );
}

하지만..useEffect를 사용하면 화면깜박임이 발생할 수 밖에 없는 구조

어떻게 로딩처리를 하나요..?

2024-11-11 이전 해결법 (use를 사용해 해결)

<Suspense fallback={<div>loading</div>}>
	<ClientC />
</Suspense>

nextjs 에서는 Suspense를 이용해서 클라이언트 컴포넌트의 비동기 로직을 간편하게 로딩처리 할 수 있습니다.

간단한 딜레이 함수를 만들어 Promise를 반환시켜 해당 컴포넌트를 Suspense를 트리거 할 수 있게 만들어주자

 

const delay = () => {
  return new Promise<string>(resolve => {
    setTimeout(() => {
      resolve('업데이트된 텍스트');
    }, 2000);
  });
};

이후 useEffect에 해당 로직을 실행시키면…?

export default function ClientC() {
  const [sessionId, setSessionId] = useState<null | string>(null);

  useEffect(() => {
    (async () => {
      const result = await delay();
      setSessionId(result);
    })();
  }, []);

  return (
    <div>
      <h1>홈 페이지</h1>
      <div>
        <p>현재 세션 ID: {sessionId}</p>
      </div>
    </div>
  );
}

 

Suspense는 트리거되지 않는다!

 

Suspense는 컴포넌트 랜더링 시 promise를 반환받고 이를 토대로 로딩상태를 결정함

⇒ useEffect내의 비동기함수는 Suspense를 트리거 하지 못한다. 이미 자식 컴포넌트는 반환되었기 때문에 이를 이미 composite 한 상태임 이후 useEffect가 실행되기때문에 Suspense의 fallback이 끼어들 여지가 없음

 

해결방법

여러 방법이 존재하겠지만 결국 proimse상태를 반환해주면 해결되는 문제이다. 이때 쉽게 쓸 수 있는 방법은 react의 최신 훅인 use를 사용하는것이다.

 

use란?

• use 함수의 동작 방식:
• 'use' 함수는 Promise를 받아 그 결과를 동기적으로 반환하는 것처럼 보이게 합니다.
• 내부적으로, 'use'는 Promise가 해결될 때까지 컴포넌트의 렌더링을 일시 중단합니다.
• 이 과정에서 Suspense의 fallback이 표시됩니다.
• Promise가 해결되면, 컴포넌트는 결과와 함께 다시 렌더링됩니다.

• Suspense와의 상호작용:
• 'use'로 감싼 비동기 작업이 진행 중일 때, React는 가장 가까운 Suspense 경계로 “throw함".
• Suspense는 이 "던져진" 상태를 감지하고 fallback을 표시합니다.
• 데이터가 준비되면 Suspense는 fallback을 실제 컴포넌트로 교체합니다

 

// server component
<Suspense fallback={<div>loading</div>}>
	<ClientC />
</Suspense>

// --------

// client component 
'use client';
const delay = () => {
  return new Promise<string>(resolve => {
    setTimeout(() => {
      resolve('업데이트된 텍스트');
    }, 2000);
  });
};

export default function ClientC() {
    const sessionId = use(delay());
//   const [sessionId, setSessionId] = useState<null | string>(null);

  return (
    <div>
      <h1>홈 페이지</h1>
      <div>
        <p>현재 세션 ID: {sessionId}</p>
      </div>
    </div>
  );
}

위처럼 use를 사용하면 마치 nextjs 의 서버사이드 랜더링 방식처럼

동기적인 느낌으로 컴포넌트를 랜더링 가능하게된다. use는 이외에도 context를if문 내에서 실행시킬 수 있게 해준다.

아래는 리액트 공식 use 사용법

use – React

The library for web and native user interfaces

https://ko.react.dev/reference/react/use

 

주의점!

💡

use Hook은 React의 Experimental 및 Canary 채널에 포함되어 있습니다.

• Canary Channel: 가장 최신의 개발 버전으로, 새로운 기능과 변경 사항이 즉시 반영됨

 

실험적인 기능은 API가 변경될 수 있으며, 예상치 못한 버그나 문제가 발생할 수 있습니다.

또한 향후 업데이트에서 기능의 변경이나 제거가 있을 수 있으므로, 코드 수정이 필요할 수 있습니다.

// server 컴포넌트입니다.
const fetchFnc = async () => {
  return await new Promise<string>(resolve => {
    setTimeout(() => {
      resolve('업데이트된 텍스트');
    }, 2000);
  });
};

export default async function Card() {
  return (
      <Suspense fallback={<div>loading</div>}>
        <ClientComp promise={fetchFnc()} />
      </Suspense>
  );
}

'use client';
import { use } from 'react';


export default function ClientComp({ promise }: { promise: Promise<any> }) {
  const text = use(promise);

  return (
    <div>
      클라이언트 컴포넌트입니다: {text}
    </div>
  );
}

'use client';

import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
import { use } from 'react';

export default function ClientC() {
  const { data } = useSuspenseQuery({
    queryKey: ['someData'],
    queryFn: () => new Promise<string>(resolve => setTimeout(() => resolve('업데이트된 텍스트'), 2000)),
  });
  
//  ...