ツイートの埋め込みがうまく展開されない
いくつかの投稿にツイートのリンクを貼っているんだけど、時と場合によってツイートの埋め込みがうまく展開されたりされなかったりしており、原因がよく分かっていない。
うまく展開されていなかった場合、リロードすることでだいたいうまく展開されるようになるのもよく分からない。
ツイートを埋め込むときは Twitter Web の「埋め込む」もしくは TweetDeck の「embed this tweet」でリンクをコピーするんだけど、内容は以下のような感じになる。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ツイートの展開がちゃんとされるときとされないときがあって、ちゃんとされなくてもリロードするとちゃんとされる<br>なんでだ</p>— tagucch (@tagucch) <a href="https://twitter.com/tagucch/status/1404123347521130497?ref_src=twsrc%5Etfw">June 13, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
script タグに async がついているので「そういえば script タグの async とか defer って前に調べたなと思って自分の投稿をさかのぼったら6/8 の投稿にあった。
マークダウンファイル上にある script タグは読み込み順どうなるんだ……？
マークダウンファイルをパースしてタグをつけた HTML の文字列として Next.js が props を受け取り、それを JSX 内に埋め込んで全体が HTML としてパースされる、みたいな感じなのかな(全然分からん)
SSG であらかじめ HTML を生成しているのでそのタイミングで script タグが呼ばれている気もする。
うまく展開されないときに Developer Tool の Elements タブを見てみたところblockquoteタグのままで、リロードしてうまく展開されたあとに見てみるとdivとiframeになっていた。script タグの src に指定されているwidgets.jsというやつの中身を確認したらからくりが分かるのかな。
ググったら色々あったわ
なんでかな〜と思ったけど「Next.js Twitter 埋め込み」とかでググったら同じことで悩んでる人がいた。なんていうか、自分はこういう「課題解決の第一歩を踏み出すまでの初速」的なものがめちゃくちゃ遅いのがよくないので反省する。
teratail かい、という感じなんだけどそれはまあ置いといて、アンサーの方が言うようにuseEffectで追加するといいというアドバイスとともに Next.js のリポジトリの Issue が貼ってあったので読んだ。
Issue を読んだのだけど、なんかblockquoteは登場しなくて、widgets.jsだけをuseEffectで読み込んでねみたいな感じだ。なんかちょっとズレてるような気がしなくもない。
で、まあこの Issue を下まで読むとreact-twitter-embedという便利そうなライブラリがあるよみたいに書いてあって、同様の問題に悩んでいた人がReact の画面に Tweet 埋め込みという記事を書いてくれていたので、おとなしくこのライブラリを使ったほうがよさそうだなと思って追加してみた。
追加してみたけど、どうやってマークダウンの中で呼ぶの……？無理では？
無理そうだったので、記事ページでuseEffectを使ってwidgets.jsを読み込むようにした。そしたら一応ローカルではうまく動いてたみたいだけど、本番環境ではどうなってるのか分からないのでこの投稿をデプロイしたあとに確かめてみます。
先にwidgets.jsを読み込むとなると、今までのblockquoteのあとに書いてあった script タグは不要(同じ JS を読み込んでるため)になるので全部消した。複数のツイートを貼れば貼るほど読み込む回数が増えて重くなるので、今度から意図的に外そう。