Hydration failed because the initial UI does not match

概要

Next.jsやReactのSSR（サーバーサイドレンダリング）時に、サーバー出力のHTMLとブラウザのHTMLが一致しない「ハイドレーション不一致エラー」の直し方。

背景・原因

（ここに具体的な背景や、エラーが起こる仕組みを記載します）

解決手順 / 使い方

1. 手順1: （コードの修正や確認作業）
2. 手順2: （テスト）

// 修正前のエラーが起きるコード例
const data = undefined;
console.log(data.property); // Error!

// 修正後（安全なコード）
console.log(data?.property); // undefinedが返るだけでクラッシュしない

ポイント💡 実務での運用時の注意点などを記載。