microCMS「埋め込み機能」利用時のHydrationエラー対策方法

microCMS の埋め込み機能（iframe）を使用した際に、Next.js で以下のような Hydration エラーが発生しました。

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

内容を確認したところ、クライアント側でIframelyのスクリプトが実行されてDOM構造が動的に変わることが原因のようでした。

解決策

まずはsuppressHydrationWarning を試しましたが効果が見られなかったので、iframe埋め込み部分のみをクライアントサイドレンダリング（CSR）に切り替え、その他はサーバーサイドレンダリング（SSR）のまま維持することで、Hydrationの不一致を局所的に解消しました。

一瞬のちらつきはあるものの、ページ全体をCSRに切り替える方法やコンソールのエラーをそのままにするよりもこちらを選びました。

microCMSとNext.jsでは、本文の表示だけでなく、公開後のHTMLやメタデータも確認します。サイト全体の確認項目は、microCMSとNext.jsのSEO対策チェックリストにまとめています。

当サイトで採用しているmicroCMS、Next.js、Cloudflare Pagesの構成は、microCMSとWordPressの比較・実装記事で紹介しています。