ハイドレーション

Nuxtのデフォルトはユニバーサルレンダリング（SSR）です。
これは、コンポーネントが2回実行されることを意味します。

サーバーサイド: HTMLを生成
クライアントサイド: HTMLにJavaScriptの機能を付加（ハイドレーション）

この「2回実行される」という特性を理解しておくことが、Nuxtアプリケーション開発では非常に重要です。

ハイドレーションとは

ハイドレーションとは、サーバー側で生成された静的なHTMLに、クライアント側でVueのリアクティビティシステムやイベントリスナーを付与するプロセスです。

プロセスは以下のステップで進行します：

ステップ1（サーバー）

Vueコンポーネントが実行される
HTMLが生成される: <p>Count: 0</p><button>Increment</button>
このHTMLがブラウザに送信される

ステップ2（クライアント）

ブラウザがHTMLを表示（この時点ではただのHTML、ボタンは動かない）
JavaScriptがロードされる
Vueが再度実行される
既存のHTMLにイベントリスナーなどを「ハイドレート（付加）」する
ボタンがクリック可能になる

ハイドレーションエラーを体験する

右のプレビューを見てください。ブラウザの開発者ツール（F12キー）を開いて、Consoleタブを確認しましょう。

警告が表示されているはずです：

Hydration completed but contains mismatches.

これが「ハイドレーションミスマッチ」エラーです。なぜこのエラーが発生しているのでしょうか？

app.vue のコードを見てみましょう：

<script setup>
const timestamp = Date.now() // ❌ これが問題！

console.log('timestamp:', timestamp)
</script>

<template>
  <div>
    <p>Timestamp: {{ timestamp }}</p>
  </div>
</template>

何が問題なのか？

サーバーサイド（下のTerminalタブを確認）:
- Date.now()が実行され、その時点のタイムスタンプが生成される
- 例: timestamp: 1729641234567
クライアントサイド（ブラウザのConsoleタブ）:
- 数ミリ秒後にDate.now()が再度実行される
- 例: timestamp: 1729641234892

サーバーとクライアントで実行時刻が異なるため、異なる値になり、ハイドレーションミスマッチが発生します。

なぜ深刻なのか？

ハイドレーションエラーは単なる警告ではありません：

⚠️ パフォーマンス低下（コンポーネント全体を再レンダリング）
⚠️ ボタンなどのイベントリスナーが動作しない可能性
⚠️ 予期しない表示の崩れ

これを修正する方法を次のチャレンジで学びましょう。

ハイドレーションミスマッチ

サーバーで生成したHTMLとクライアントで生成したHTMLが異なる場合、「ハイドレーションミスマッチ」エラーが発生します。

ハイドレーションミスマッチは単なる警告ではありません。以下のような深刻な問題を引き起こします：

パフォーマンス: インタラクティブになるまでの時間が増加
ユーザー体験: コンテンツのちらつき
機能: イベントリスナーが正しく動作しない
SEO: 検索エンジンとユーザーが異なるコンテンツを見る可能性

よくあるミスマッチの原因

1. ブラウザ専用APIの使用

❌ 悪い例:

<script setup>
// サーバーにはwindowが存在しない！
const width = window.innerWidth
</script>

<template>
  <p>Width: {{ width }}</p>
</template>

✅ 良い例:

<script setup>
const width = ref(0)

onMounted(() => {
  // onMountedはクライアントでのみ実行される
  width.value = window.innerWidth
})
</script>

<template>
  <p>Width: {{ width }}</p>
</template>

2. 時刻ベースのコンテンツ

❌ 悪い例:

<script setup>
// サーバーとクライアントで実行時刻が異なる
const now = new Date().toISOString()
</script>

<template>
  <p>{{ now }}</p>
</template>

✅ 良い例:

<script setup>
// useStateでサーバーの値をクライアントに転送
const now = useState('timestamp', () => new Date().toISOString())
</script>

<template>
  <p>{{ now }}</p>
</template>

3. ランダム値の使用

❌ 悪い例:

<script setup>
// サーバーとクライアントで異なる値になる
const id = Math.random()
</script>

✅ 良い例:

<script setup>
// useStateで一貫性を保つ
const id = useState('random-id', () => Math.random())
</script>

SSR時のライフサイクル

<script setup> 内のコードはサーバーでもクライアントでも実行されますが、
その中のライフサイクルフックによって実行タイミングが異なります。

SSR（サーバーサイド）で実行されるもの

<script setup> のトップレベルコード（ref() や reactive() など）
useAsyncData() / useFetch()
onServerPrefetch() などのサーバー専用フック

CSR（クライアントサイド）でのみ実行されるもの

onBeforeMount() / onMounted()
onBeforeUpdate() / onUpdated()
onBeforeUnmount() / onUnmounted()

// ⭕ サーバーでもクライアントでも実行される
const count = ref(0)

// ⭕ サーバーでのみ実行される
onServerPrefetch(async () => {
  // サーバーサイドでのデータ取得
})

// ❌ サーバーでは実行されない（クライアントのみ）
onMounted(() => {
  console.log('mounted')
})

つまり、ブラウザ専用のAPI（window, document, localStorageなど）は、クライアントサイドでのみ実行されることを保証する必要があります。

代表的な方法：

onMounted() 内で使用する
<ClientOnly> コンポーネントで囲む
import.meta.client でガードする
.client.vue ファイルを使用する

ClientOnlyコンポーネント

クライアントサイドでのみレンダリングしたいコンポーネントには、<ClientOnly> コンポーネントを使用できます。

<template>
  <div>
    <p>これはサーバーでもクライアントでも表示される</p>

    <ClientOnly>
      <p>これはクライアントでのみ表示される</p>
      <!-- ここではwindowやdocumentを安全に使える -->
    </ClientOnly>
  </div>
</template>