vue のwarning `This can cause hydration errors or potentially disrupt future functionality.`について

最近ライブラリの更新を行なったのですが、それを契機に開発サーバ起動時に以下のようなwarningが出力されるようになりました。

[23:29:02]  WARN  warning: <tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
    28 |          </td>
    29 |        </tr>
    30 |        <tr data-v-inspector="components/example/Review.vue:30:7">
       |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    31 |          <th scope="row" class="text-left" data-v-inspector="components/example/Review.vue:31:9">
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    32 |            {{ $t('total') }}
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    33 |          </th>
       |  ^^^^^^^^^^^^^
    34 |          <td data-v-inspector="components/example/Review.vue:34:9" />
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    35 |          <td data-v-inspector="components/example/Review.vue:35:9">
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    36 |            <CommonInput :value="data.text" />
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    37 |          </td>
       |  ^^^^^^^^^^^^^
    38 |        </tr>
       |  ^^^^^^^^^^^
      Plugin: vite:vue
      File: /Users/hiro-lapis/Projects/web/components/Review.vue

原因

Official reference Suppressing Hydration Mismatches

このwarning、vue3.5から警告が出るようになった模様。
警告が出るようになったと同時にdata-allow-mismatchというattributeを設定することでwarningを抑制できる模様。
SPAアプリを開発している場合であっても、このwarningは出ます。

解消法

方法①適切なマークアップをする

当たり前のことですが、warningが出ている箇所をチェックし、HTMLの規格に沿ったマークアップにすることでwarningを解消できます。

手間はかかりますが、一番素直な対応ですし、コードの品質を上げるという意味でもこちらが望ましそうです。

方法②custom attributeをつける
warning が出ているHTMLにdata-allow-mismatchをつつけることで黙らせることはできます。

が、configとかで一律warningを出さなく設定することはできない模様。。。

SPAだろうがなんだろうが、SSRフレンドリーなマークしろってことですかね😅

hydration warning が出るマークアップ一例

①tableタグ直下でcolタグを使っている

.html

// NG
<table>
    <col style="width: 30%" />
    <thead>...略

 WARN  warning: <col> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.

MDN tableを見ると、table直下で許容されるタグは限られている。
よって、↓以下のように修正すべき。
ちなみに、

でラップすることによるデザイン崩れは起きません。(cssでcolにスタイルを当てたら話は別ですが)

.html

<table>
    <colgroup>
        <col style="width: 30%" />
    </colgroup>
    <thead>...略

①tbodyタグ直下でtdタグを使っている

.html

// NG
<tbody>
    <td>...略

WARN  warning: <td> cannot be child of <tbody>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.

MDN tbody Permitted contentのTag Permissionを見ると、tbody下で許容されるタグは限られている。
よって、↓以下のように修正すべき。

.html

// NG
<tbody>
    <tr>
        <td>...略

③summary タグ内でliタグを使っている

.html

<li>
    <summary>

warning: <summary> cannot be child of <li>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.

MDN li Technical liにもあるようにliタグの子要素はFlow contentnに属するものである必要がある