SPA遷移した場合の描画がうまくいかない
Nuxtでツイートの一覧をサーバーから取得して、twitterのwidgets.jsを用いてカード化して表示するという処理がありました！
しかしSPA遷移時にうまくwidgets.jsが適用されず、カード化されないで表示されてしまうことがありましたので、備忘録として残して置きたいと思います。
原因
原因というか、nuxt.config.tsのscriptでtwitterのwidgets.jsを読み込んでいるとSPA時にうまく再描画されず、カード化されませんでした。
nuxt.config.ts
head: {
...
...
...
script: [
{
src: 'https://platform.twitter.com/widgets.js',
charset: 'utf-8'
}
]対処方法
pages配下のheadで読み込ませる
twitterのwidgets.jsをpages配下のhead()内で読み込ませることで、SPA遷移時もうまく描画されました。
src/pages/index.ts
head() {
return {
script: [
{
src: 'https://platform.twitter.com/widgets.js',
body: true
}
],
...
...
...
]
};
},ツイートの取得処理は、pages配下のfetchで処理する
ツイートの取得処理はcomponentのmountedなどで遅延取得したりすると、今度はSPA遷移時は再描画がかかるのですが、SSRでアクセスした際には描画されなくなりました。。
ここは大人しくpages配下のfetchで処理することで、SSRとSPAで両方動かすことでちゃんと再描画がかかり、ツイッターのカード化をさせることができました！
src/pages/index.ts
async fetch({ store: { dispatch } }) {
await Promise.all([
....,
dispatch('twitter/saveTweets')
]);
},またasync fetch({ store: { dispatch } })のようにオブジェクトの分割代入で記述する方法についてはこちらの記事へまとめています！
参考サイト
まとめ
今回は、Nuxtで外部リソースを読み込む時にSPA遷移した場合の描画がうまくいかない時の方法をご紹介しました！
記事の内容的には完全に僕の備忘録ですが、何か詰まった際に皆さんの参考になれば嬉しいです！
ちなみに今回のやり方は、結構無理矢理に再描画をかけて外部リソースのJSを当て直している感じなので、通常はこんなことしなくても問題ないと思います。
コメント