경고:텍스트 내용이 일치하지 않습니다.서버: "I'm out" 클라이언트: "I'm in" div

경고:텍스트 내용이 일치하지 않습니다.서버: "I'm out" 클라이언트: "I'm in" div

사용하고 있다universal-cookieNext.js 프로젝트 및 콘솔에 경고를 반환하는 간단한 코드:

import React, { useState } from "react";
import Cookies from "universal-cookie";
import styles from "../styles/Home.module.css";

export default function Home() {
  const cook = new Cookies();
  const [session, setSession] = useState(cook.get("key"));
  const setCookie = () => {
    cook.set("key", "hola", { secure: true });
    setSession(cook.get("key"));
  };
  const deleteCookie = () => {
    cook.remove("key", { secure: true });
    setSession(undefined);
  };

  return (
    <div className={styles.container}>
      <button onClick={() => setCookie()}>Save Cookie</button>
      <button onClick={() => deleteCookie()}>Delete Cookie</button>
      {session ? <>I'm in</> : <>I'm out</>}
    </div>
  );
}

"I'MIN" 후 페이지를 새로 고치면 콘솔에 다음 경고가 나타납니다.

나는 이미 해결책을 찾기 위해 모든 곳을 찾아보았다.

Next.js는 서버의 모든 페이지를 미리 렌더링합니다.

기본적으로는 Next.js는 모든 페이지를 프리렌더합니다.즉, Next.js는 클라이언트 측 JavaScript에 의해 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성합니다.

(...) 브라우저에 의해 페이지가 로드되면 JavaScript 코드가 실행되어 페이지가 완전히 인터랙티브하게 됩니다.(이 과정을 하이드레이션이라고 합니다)

- Next.js, 페이지, 프리렌더링

브라우저에 렌더링된 HTML이 서버에서 생성된 HTML과 일치하지 않기 때문에 수화 문제가 발생합니다.당신의 경우 이는cook.get("key")둘 다 다른 것을 반환합니다.

이 문제를 해결할 수 있는 몇 가지 옵션이 있습니다.

---

#1 설정상태 이동처useEffect

첫 번째 해결책은 내부 상태를 설정하여 이동하는 것입니다.useEffect이것에 의해, 상태는 클라이언트측에서만 설정되기 때문에, 미스매치는 발생하지 않습니다.

export default function Home() {
    const cook = new Cookies();
    const [session, setSession] = useState();
    
    // `setCookie` and `deleteCookie` code here

    useEffect(() => {
        setSession(cook.get("key"));
    }, []);

    return (
        <div className={styles.container}>
            <button onClick={() => setCookie()}>Save Cookie</button>
            <button onClick={() => deleteCookie()}>Delete Cookie</button>
            {session ? <>I'm in</> : <>I'm out</>}
        </div>
    );
}

---

#2 사용방법next/dynamic와 함께{ ssr: false }

대체 솔루션으로서 React 컴포넌트를 사용하여 동적으로 Import함으로써 이 문제를 회피할 수도 있습니다.{ ssr: false }컴포넌트가 사용되는 장소.이렇게 하면 컴포넌트가 서버에 포함되지 않고 클라이언트 측에만 동적으로 로드됩니다.

const Home = dynamic(
    () => import('../components/Home'),
    { ssr: false }
)

사용.suppresshydrationwarninghtml 요소의 속성(다름)이 나에게 효과가 있었다.아래 설명서에 따라 단일 레벨에서만 작동합니다.

https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning

저 같은 경우에는 제가 제 머리를 돌렸을 때reactStrictMode로.falsenext.config.js 파일에서 이 경고가 발생했습니다.다시 돌려야 했어요true그 후 경고는 사라졌고

간단한 수정:

.next 폴더를 삭제하고 npm run build를 실행합니다.

언급URL : https://stackoverflow.com/questions/66374123/warning-text-content-did-not-match-server-im-out-client-im-in-div