Next.js で dayjs を利用したい

Question

実現したいこと

Next.js で dayjs を利用したいです

発生している問題・エラーメッセージ

Client Component で dayjs.format を呼び出すと hydration エラーが出ます
hydration エラーが出ないようにする方法はありますか？

Client Component であることは必須です

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "2024/4/13 18:06:26:801" Client: "2024/4/13 18:06:27:019"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

該当のソースコード

'use client';

import dayjs from 'dayjs';

export default function Page() {
  return <h1>{dayjs().format('YYYY/M/D HH:mm:ss:SSS')}</h1>;
}

試したこと1

以下のようにコンポーネントを分離してみましたが効果はありませんでした
（Client Component以下はClient Componentなので当然の結果です）
https://stackblitz.com/edit/stackblitz-starters-khgkza?file=app%2Fpage.tsx

試したこと2

Material UIの NoSsr を利用してSSRされなくして解決できた。
しかし、強引なやり方な気がするので他の方法を探しています。

補足情報（FW/ツールのバージョンなど）

• Next.js 14
• DayJS 1.11.10

Answer 1

とりあえずの解決法としては、suppressHydrationWarning を該当の h1要素に付与してあげることかと思います。

https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning

---

ただ、根本的なところが気になります。 Server Component であれば、「リクエスト時に一度だけ new Date() が計算される」という挙動なので、意図通りだと思いますが、

今回は Client Component なので「レンダリングするたびに new Date() が計算される」となります。Client Component については、レンダリングが意図した時以外に発生しない という保証が無いので、

useState と useEffect を使って、ブラウザ側で「コンポーネントを初めて描画した時刻」をステートに保持するようにする必要があります。

(Server Component であろうと、Client Component であろうと、サーバー側からは、「ブラウザ側の情報」にアクセスすることが不可能なので、SSR, Server Component を使う方法ではかなり難しそうです。)

'use client';

import dayjs from 'dayjs';

export default function Page() {
  const [date, setDate] = useState();
  useEffect(() => {
    setDate(dayjs());
  }, []);
  const formattedDate = useMemo(() => date?.format('YYYY/M/D HH:mm:ss:SSS'), [date]);
  
  // 一瞬だけ、「-」と表示されてから、現在時刻に切り替わる。
  // 開発環境でだけ起こる(StrictModeのため)事象として、 表示される時刻が一度だけ変わってしまうが、本番では大丈夫なはず
  return <h1>{formattedDate ?? "-"}</h1>;
}

Comments

[johnwick]

「SSRしない」までやるのは強力すぎるのでsuppressHydrationWarning あたりが妥当そうですね！
存在を忘れていましたが「suppressHydrationWarning」をいつ使うのかなと思った事が思い返すと過去にあった気がします。
今回がまさに使うタイミングですね！
ありがとうございます！