ApexChartsがSSRで描画されない

まとめ　no-ssrで囲む
     <no-ssr>
       <apexchart></apexchart>
     </no-ssr>

先日、vueでapexchartを使っていた。

https://apexcharts.com/

develop環境では普通に動いていたのに、staging環境では動かなかった。。。（最近多いよhttps://app.gitbook.com/@kajirikajiri/s/gitbook/~/drafts/-M4bZvXhiivIRkpoAec8/vue-the-client-side-rendered-virtual-dom-tree）

細かいことをいうと、最初は表示される。更新すると表示されない。（staging)

ちなみに、developだと、更新しても表示される

調べた結果、<no-ssr>で囲み、mounted後に処理されるようにすることで解決した

issue https://github.com/apexcharts/vue-apexcharts/issues/103

no-ssrタグ https://qiita.com/potato4d/items/04d3767aaa036f557950

解決に至った経緯としては、表示された時と、表示されないときのElements(chromeのdevtoolで見れるやつ)を見比べたら、表示されないときは、<apexchart></apexchart>が表示されていて、表示される時は、<div class="apexchart"><svg></svg></div>みたいな感じで表示に差があったこと。また、develop環境では表示されることから、server side renderingが影響しているのではないかという点から検索したらいい感じにgoogleさんが見つけてくれた。

上記のqiitaの記事によると、フレームワークやライブラリによっては、server side renderingに対応していないものもあるようなので、今回のようなケースはこれからも遭遇しそうだ。覚えておこう

前へvue The client-side rendered virtual DOM tree 次へatcoder

最終更新 5 年前