【nuxt】ローカルでは動くがyarn generateしてサーバにアップするとエラーになる

あとはサーバにアップしたら終わり、、、と思っていたら遭遇して死んだので再び死なない為のメモです

概要

nuxtで作業後、yarn generateして生成したファイルをサーバにあげるとローカル環境では動作していたjs周りが動作していなかった

以下エラー文

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

解決

エラーを出している箇所を<no-ssr></no-ssr>で囲う
※nuxt 2.9.0以降では<no-ssr></no-ssr>は非推奨で代わりに<client-only></client-only>で囲う

原因

ローカルでもwarnは出ていた

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

クライアント側とサーバ側でレンダリングをするhtmlが異なる場合に起こるエラーのよう
v-ifなどを使っていると起こりやすいそうで、v-showなどに置き換えて解決する方法がある様だが
今回はプラグインを使っている箇所で起きたエラーだったので書き換えではなく
<no-ssr></no-ssr>で囲いクライアント側でのみコンポーネントを意図的にレンダリングすることでエラーを回避した

参考
https://qiita.com/mk-tool/items/d42119677e79b667450e
https://qiita.com/yahsan2/items/a70c4c8f617ee9b1f9ff
https://qiita.com/potato4d/items/04d3767aaa036f557950
https://ja.nuxtjs.org/api/components-client-only/