[Next.js] "Text content does not match server-rendered HTML."

"Text content does not match server-rendered HTML."

다른 해결책에서는 useState와 useEffect를 사용하라고 하는데..
난 이미 사용하고 있는데?? 왜이러는것일까

const Header = () => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      let time = new Date();
      setDate(time.toLocaleString());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
	  <div>{date}</div>
  );
};

export default Header;

https://www.reddit.com/r/nextjs/comments/u346aa/text_content_does_not_match_serverrendered_html/?utm_source=share&utm_medium=web2x&context=3

서칭을 하다가 결국 나와 같은 케이스를 찾았다.
useState의 최초 상태값을 new Date()를 넣어두니, 서버단과 클라이언트단의 최초 상태값이 달라서 이런 에러가 발생한다는 것 같다.
그래서 그냥 빈 스트링으로 넣으니 에러가 사라진다.

const Header = () => {
  const [date, setDate] = useState<string>("");

  useEffect(() => {
    const timer = setInterval(() => {
      let time = new Date();
      setDate(time.toLocaleString());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
	  <div>{date}</div>
  );
};

export default Header;

대신, state가 변경되기 전까지는 아무것도 안뜨는.. 로딩이 느껴진다.

그래서 useEffect 맨 처음에 new Date()를 넣어주고 시작하는 것을 추가했다.

const Header = () => {
  const [date, setDate] = useState<string>("");

  useEffect(() => {
  	setDate(new Date().toLocaleString())
    const timer = setInterval(() => {
      let time = new Date();
      setDate(time.toLocaleString());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
	  <div>{date}</div>
  );
};

export default Header;

끝