A W E S O M E . はデフォルトでは ISR(Incremental Static Regeneration)が使われています。A W E S O M E . は元々 MDX で記事を書くテーマでであり、ISR を使っても特に問題はなかったと思います。
対して A W E S O M E . を使って Notion で記事を書く場合は問題があります。
それは画像のリンク切れ問題です。
Notion のAPI 経由で取得した 画像リンクは、セキュリティ上の理由で 1時間で切れてしまう仕様になっています。詳細は、Notion API の公式ガイダンスに記載されています。
つまり ISR を使っていると 1時間後に画像のリンクが切れてしまうことになるので、画像のリンクが切れてから最初の訪問者には画像が表示されないということになってしまいます(再読み込みすると、再レンダリングされて画像が表示されます)。
今回はこの問題の対応方法について解説します。
画像のリンク切れに対応する
Notion を使ったブログの画像のリンク切れの対応方法は、 easy-notion-blog というブログテーマの開発者である おとよさん の記事に詳しく書かれており、とても参考になりました。
上記の記事を参考にすると、対応方法は3つありそうです。
今回は、1 の SSR に切り替える方法を選択しました(一番手っ取り早く対応できるため)。
SSR にすると、ページをリクエストするたびにレンダリングすることになるのでページの表示が遅くなってしまいますが、一番手っ取り早く対応できるので SSR を選択しました。
後日、他の方法にもチャレンジしてみたいと思います。
コードの変更内容
以下のリンクに変更した内容を記載しています。
すぐに ISR に戻せるように、コードは削除せずにコメントアウトで対応しています。
さらなる対応
今回の対応内容である SSR ではページが表示されるまでに時間がかかってしまいます。
ページ遷移をする際にページが固まったように見えるかもしれません。
この場合の対処方法としてローディングアニメーションを追加するという対策もありそうなので、こちらの方法を試してみようと思います。