ApexChartsがSSRで描画されない

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

最終更新 5 年前

役に立ちましたか？

ApexChartsがSSRで描画されない

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

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

develop環境では普通に動いていたのに、staging環境では動かなかった。。。（最近多いよ）

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

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

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

issue

no-ssrタグ

解決に至った経緯としては、表示された時と、表示されないときの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 年前

役に立ちましたか？