Nuxt 3 における "hydration" は、サーバーサイドレンダリング（SSR）で生成された HTML マークアップに対して、クライアントサイドでインタラクティブな動作や状態を復元するプロセスを指します。これは、初めてページを読み込んだときにサーバーサイドでレンダリングされたコンテンツを、クライアントサイドで「活性化」することを意味します。このプロセスによって、ウェブアプリケーションのユーザーエクスペリエンスが向上し、動的なコンポーネントの振る舞いがクライアントサイドで実行されます。
具体的には、hydration のプロセスは次のように進行します：
- サーバーサイドレンダリング（SSR）: 初めてページをリクエストしたとき、サーバーサイドでコンポーネントのレンダリングが行われ、HTML マークアップが生成されます。この際には、動的なデータや状態を含む部分も含まれます。
- クライアントサイドへのアプリケーションのダウンロード: サーバーサイドで生成された HTML マークアップがクライアントに送信され、ユーザーのブラウザでアプリケーションが再生成される前に、まず初期状態がセットアップされます。この段階では、動的な動作や状態はまだアクティブではありません。
- Hydration プロセス: クライアントサイドでアプリケーションが起動すると、HTML マークアップに含まれているデータや状態を基に、コンポーネントやインタラクティブな部分がクライアントサイドで再生成されます。これにより、初めてページを開いたときの状態が再現され、ユーザーがクライアントサイドでの操作やアクションを行うことが可能になります。
Nuxt 3 では、hydration プロセスは自動的に行われ、クライアントサイドでのインタラクティブな体験をサーバーサイドレンダリングと組み合わせて提供します。これにより、初回のページ読み込み時にもスムーズなユーザーエクスペリエンスが実現されます。