【Next.js】SSR環境でやっちゃダメなこと【Day.js】

前回の記事 で SSR 時における Day.js の挙動を調べてみました。

ということで前回の記事を読めばわかる方はわかると思いますが、SSR 環境下で書いてはいけない書きっぷりがいくつかあるのでざくっと書いていこうと思います。

useState の初期値に現在日時を指定する

const [currentDate, setCurrentDate] = useState(dayjs());

SSR から CSR に移ったタイミングで state が再度初期化されるため、render 結果に差異が発生します。

window オブジェクトが突っ込めないのと同じですね。

useMemo 内で使用する

useState と同様ですね。

Stack Overflow を覗いていると上記の解答がベストアンサーになっていたので、念のため。

基本的には window オブジェクトと同様の扱い方をすることが大切ですね。