Error: Hydration failed because the initial UI does not match what was rendered on the server.

react-player로 페이지에 영상을 넣던 중 만난 에러.
처음 렌더링시에는 에러가 뜨지 않는데 리렌더링시에 계속해서 발생했다.

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

대충 뭔가 렌더링 순서문제니까 useEffect쓰렴 이라는 뜻인 것 같아서 열심히 구글링한 결과

해당 코드가 초기 View를 Pre-Rendering하는 SSR 과정에서 존재하지 않는 document에 접근하려고 했기 때문이다. WEB API 중 하나인 window 객체 안에 존재하는 document는 말그대로 클라이언트 단에서 제공하는 API이기 때문에 SSR 과정이 완료되어서 클라이언트로 넘어오기 전까지 document는 아직 존재하지 않는다. 그래서 에러가 발생한 것이다.

참조 : https://leo-xee.github.io/Error/next-window/

🔗 에러난 코드

import ReactPlayer from "react-player/lazy";

const Video = () => {

    return (
        <>
              <ReactPlayer .../>
        </>
    );
};

export default Video;

🔗 수정한 코드

import { useEffect, useState } from "react";
import ReactPlayer from "react-player/lazy";

const Video = () => {
    const [hasWindow, setHasWindow] = useState(false);
    useEffect(() => {
        if (typeof window !== "undefined") {
            setHasWindow(true);
        }
    }, []);

    return (
        <>
            {hasWindow && (
                <ReactPlayer .../>
             )}
        </>
    );
};

export default Video;

클라이언트 단에서 처음 렌더링되는 useState와 useEffect를 사용해서 window와 같은 WEB API를 숨겨주면 된다.