Next.jsのHydration Errorを引き起こしたコード

問題のコード

  const getInitialValue = () => {
      const params = new URLSearchParams(window.locaton.search);
      const value = params.get('value');
      return value ?? null;
  }
  const [value, setValue] = useState(getInitialValue());

  ...

  return <div>{value}</div>

Hydration Errorの原因

SSR時のHTML

サーバー上ではwindowオブジェクトはnullなので、valueもnullになる。

<div></div>

クライアントでの初期レンダリング時のHTML

windowが存在するので、valueがnullにならない。

<div>valueの値</div>

こうして二つに差分が起こり、Hydration Errorになる。

どうすればいいのか

クライアントでの初期値もnullにすることで、SSR時のものと同じ結果にする。

  const getInitialValue = () => {
      const params = new URLSearchParams(window.locaton.search);
      const value = params.get('value');
      return value ?? null;
  }
  const [value, setValue] = useState(null);

  useEffect(() => {
      setValue(getInitialValue())
  },[])

  ...

  return <div>{value}</div>