Angular v17のハイドレーション解説！ 💻💦 - DEV コミュニティ

jun

2023年11月24日に投稿・2023年11月27日に更新

ハイドレーションって何？

• クライアント側でサーバーレンダリングされたアプリを復元します。
• DOMを再利用し、状態を維持し、サーバーからデータを転送します。

なぜ重要なの？

• パフォーマンスを向上：DOMノードの再利用がローディングを速めます。
• コアWebバイタルズの向上：FID、LCP、CLSを改善します。
• SEOを向上：検索エンジンが完全にレンダリングされたコンテンツを取得できるようにします。
• UIの問題を防ぐ：ちらつきやレイアウトシフトを避けることができます。

ハイドレーションを有効にする

• サーバーサイドレンダリング(SSR)：SSRアプリケーションが必要です。
• provideClientHydrationを使う：メインのアプリコンポーネント/モジュールで使います。
• ブートストラッピング：クライアントとサーバーのプロバイダー両方に含めてください。

制約

• サーバーとクライアントのDOM構造が一致している必要があります。
• スムーズに動作させるため、直接のDOM操作は行わないでください。
• DOM構造の不一致はエラーの原因になり得ます。

エラーの取り扱い

• ngSkipHydrationを使って：DOMの違いや直接操作によって引き起こされる問題を一時的に回避します。
• コンポーネントのためのハイドレーションをスキップ

コンポーネントのためのハイドレーションをスキップ

• ハイドレーションと互換性のないコンポーネントのためにngSkipHydrationを使ってください。
• DOM操作の問題があるコンポーネントに有用です。

考慮すべき点

• 国際化(i18n)：まだサポートされていません。
• サードパーティライブラリ：一部は互換性のためにngSkipHydrationが必要かもしれません。

これでAngularハイドレーションに関する必要な事実の概要はばっちりです。もうハイドレーションを試してみましたか？😊

詳しくはAngularのドキュメントをチェックしてみてください。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/junlow/key-facts-of-angular-v17-hydration-56e