🍣

Vuetifyのv-paginationでハイドレーションエラーが出たので対処

2022/07/02に公開

Vueが期待しているマークアップと、実際にレンダリングされたHTMLが異なるとハイドレーションエラーとなる。

とのこと。

タイトルのケースは、

と言った感じ。

v-paginationにはpaginationの横幅が親コンテナの横幅より大きくなってしまう場合、サイズを自動調整してくれる機能があるのですが、それによってSSRとCSRで描画が異なってしまうためエラーが発生するようです（おそらくliタグの数が増減してしまうため）

v-showを使うことで改善する情報を見ましたが、vuetifyのコンポーネントを改変するのは自分には難しかったというか、方法があるかすら不明でしたのでv-paginationをno-ssrで囲むことで対応しました

もしくはclient-onlyでも可能だと思います、SSR回避すればよいので。

<no-ssr>
  <v-pagination></v-pagination>
</no-ssr>

ただしこの場合、SEO評価基準の一つであるCLS (Cumulative Layout Shift)が悪化する可能性があります。※ガクッとした描画はCLS悪化の原因になる。

そのため親コンテナでv-paginationのheight分のpxを持たせることで対応しました。

例：

<v-container style="height: 58px;">
  <no-ssr>
    <v-pagination></v-pagination>
  </no-ssr>
</v-container>

低コストで高クオリティな開発が可能なためvuetify利用してましたが、使っていてやはりこういった細かい問題への対処が対症療法的になりがちだなと思いました。便利だから使っちゃうんですけどね…！