👏
Next.js でクライアントでのみコードを実行したい
Next.js にて DOM を使って要素サイズを計測してから配置を決めたかったものの、SSR時に document.~ が実行されてエラーになってしまうため、メモ
const [isClient, setClient] = useState(false);
useEffect(() => {
setClient(true);
}, []);
if (isClient) {
// CSR時のみ実行
} else {
// SSR時のみ実行
}
巷には typeof window !== 'undefined'
での条件分岐を促す文献も見られたのですが、React18 からは Error: Hydration failed because the initial UI does not match what was rendered on the server.(意:クライアントでレンダリングされた初期 UI が SSR のそれと一致しないよ)とエラーが表示されるようですので、上記の方法が堅実かと思います。
Discussion