ブログカード/リンクカードをSSGで使うときどうすればいいのか

Linkカードを実装した

つまりはこういうリンクカードを実装したい。

リンクカードの仕組みとしてはURLにHTTPリクエストを送って返ってきたHTMLからOGPに必要な情報を取得し、それを元にカードのコンポーネントを作る、みたいな感じだと思う。

このサイトはNext.jsのSSGでビルドしているんだけど、リンクカードの仕組み的にビルド時に全記事のURLの数だけHTTPリクエストを飛ばすということになりそう。

記事が多くないならまだしも、このサイトはもう300記事を超えているしURLもそんくらいありそうだし、大丈夫なの……？と疑問に思って調べてみている。

Next.jsのSSGで作成したブログにブログカードを配置する - Knowhow now how?

コンポーネントに外部サイトと連携する仕組みを埋め込むことができません

なるほど。

この記事ではmdxでの話なのでmdファイルだとちょっと別の方法っぽいな。

Next.jsブログカード実装

これのマークダウン版をやればいいのかな？

これだとgetStaticPropsで記事データを取得してから変換だから、結局ビルド時なんだよね……。

OGPを使ってMarkdownのリンクをカード型のリンクにマークアップする

やっぱりgetStaticPropsでリンクカードに必要な情報を渡さないといけないから、やっぱりページのuseEffectでデータを取得して、とかできなそう……。

ただ前述の通り、ビルドするたびに数百のHTTPリクエストが走ってしまうが……これは大丈夫なのだろうか。有識者求む。

SSGとブログカード/リンクカードは相性が悪い……？