Vuejs エラー: クライアントでレンダリングされた仮想 DOM ツリーがサーバーでレンダリングされたものと一致しません

Question

アプリで Nuxt.js/Vuejs を使用していますが、さまざまな場所でこのエラーが発生し続けます:

クライアント側でレンダリングされた仮想 DOM ツリーが、サーバーでレンダリングされたコンテンツと一致しません。
これは、不正な HTML マークアップ (たとえば、<p> 内にブロックレベル要素がネストされているか、<tbody> が欠落しているなど) が原因である可能性があります。
ハイドレーションをベイルし、完全なクライアント側レンダリングを実行します。

このエラーをデバッグする最善の方法を知りたいのですが?これは、クライアントとサーバーの仮想 DOM ツリーをログに記録/取得して、どこでエラーが発生しているかを比較して見つけることができる方法ですか?

アプリケーションの規模が大きいため、手動で検証するのは困難です。

Answer 1

私の場合、このエラーは、AsyncData で配列リストを取得し、v-for 経由で タグをレンダリングするときに、 > を入力したために発生しました。 の v-for コードをブロックし、問題を解決します

Answer 2

部分的な回答: Chrome DevTools を使用すると、問題を特定し、どの要素が原因となっているかを正確に確認できます。次の手順を実行します (Nuxt 5.6.0 と Chrome 64.0.3282.186 を使用してこれを実行しています)

1. Chrome で開発者ツールを表示 (F12)
2. 「クライアント側でレンダリングされた仮想 DOM ツリー...」警告の原因となったページをロードしています。
3. DevTools コンソールの警告までスクロールします。
4. 警告のソースの場所のハイパーリンク (私の場合は vue.runtime.esm.js:574) をクリックします。
5. そこにブレークポイントを設定します (ソース コード ブラウザーの行番号を左クリックします)。
6. 同じ警告を再度表示させます。これが常に可能であるとは言えませんが、私の場合はページをリロードしました。警告が多数ある場合は、msg 変数の上にマウスを移動すると、メッセージが表示されます。
7. メッセージを見つけてブレークポイントで停止したら、呼び出しスタックを確認します。 「patch」という名前の次のフレームをクリックして、ソース コードを開きます。 patch の実行行の 4 行上にある Hydro 関数呼び出しにマウスを置きます。 Hydrate のソースへのハイパーリンクが開きます。
8. enchanted 関数で、先頭から約 15 行に移動し、assertNodeMatch が ## を返した後に false false# を返すブレークポイントを設定します。 。そこにブレークポイントを設定し、他のすべてのブレークポイントを削除します。 同じ警告が再度発行されます。これで、ブレークポイントにヒットすると、
enchanted
9. 関数で実行が停止するはずです。 DevTools コンソールに切り替えて、elm、次に vnode を評価します。ここで、elm はサーバーによってレンダリングされた DOM 要素であるように見え、vnode は仮想 DOM ノードです。 Elm は HTML に出力するので、エラーが発生した場所を特定できます。