SSRのハイドレーションをVueで学んだ

はじめに [Vue warn]: Hydration ~~~ mismatchの警告にたまに遭遇することがあり、そういえばハイドレーションをちゃんと理解してなかったので、自分のために記事を書いて理解していきます。 Vueのハイドレーションを知る SSRで行われるハイドレーション（水和）は、物質が水と反応する化学反応の水和反応になぞらえて、乾いた静的なHTMLに水分となるJavaScriptを与えて、完全に機能するWebアプリケーションを作ることです。 VueでSSRする際は、createAppの代わりにcreateSSRAppを使ってハイドレーションを行います。VueでSSRしたいとき、多くの場合はNuxtを使うのが便利だと思います。（というよりほぼ一択？） 今回はシンプルな構成にするために、Viteでサンプルを作りました。 ちなみに、npm create vite-extra@lates