ハイドレーションについて

Next.jsで開発中にコンソールで下記のWarningが発生した。

Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed

ブラウザのエクステンション（今回の場合Chrome拡張）がブラウザ上でコードに上記の属性を渡すことによって引き起こされているとのこと。
GrammarlyをuninstallしたらWarningは消えたので原因はわかった。

sjbworks

suppressHydrationWarningというpropsをtrueに設定するとWarningの表示を回避できるという記載があった。

これは単一レベルの深さまでしか機能せず、避難ハッチとしての使用を意図しています。過度に使用しないでください。これを使用してもテキストコンテンツ以外の場合は React は違いを修正しようとはしないため、将来の更新まで一貫性が保たれない可能性があります。

過度な利用を推奨されていない。

sjbworks

フロント開発の文脈における「ハイドレーション」とは、通常、クライアントサイドでのJavaScriptの実行によって、事前にレンダリングされたHTMLに対してイベントや状態のバインディング、またはUIの初期化などを行うプロセスを指す。
ハイドレーションは、サーバーサイドレンダリング（SSR）や静的サイトジェネレータ（SSG）によって生成されたHTMLをクライアントに送信し、クライアント側でJavaScriptを実行することで、動的なコンポーネントやインタラクティブな機能を持つアプリケーションを実現するために使用される。
具体的には、ハイドレーションでは、クライアント側でレンダリングされたHTMLに対して、JavaScriptフレームワークやライブラリが提供する機能を使用して、イベントハンドラのバインディング、データの取得や更新、DOMの操作などを行う。
これにより動的なUIやインタラクティブな機能を実現しユーザーとの対話性を高めることができる。

ChatGPTに説明いただいた内容はこんな感じ。

レンダリングにおけるハイドレーションについての話はこの記事もわかりやすい。