チャべログ
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 の公式ガイダンスに記載されています。
Each time a database or page is queried, a new public URL is generated for all files hosted by Notion. The public URLs are updated hourly and the previous public URLs are only valid for one hour. The exact time when the URL will expire can be found in the expiry_time property of the file object.
つまり ISR を使っていると 1時間後に画像のリンクが切れてしまうことになるので、画像のリンクが切れてから最初の訪問者には画像が表示されないということになってしまいます（再読み込みすると、再レンダリングされて画像が表示されます）。
今回はこの問題の対応方法について解説します。
画像のリンク切れに対応する
Notion を使ったブログの画像のリンク切れの対応方法は、 easy-notion-blog というブログテーマの開発者である おとよさん の記事に詳しく書かれており、とても参考になりました。
上記の記事を参考にすると、対応方法は3つありそうです。
- SSR に切り替える
- ISR + SWR で対応する
- 画像をキャッシュする
今回は、1 の SSR に切り替える方法を選択しました（一番手っ取り早く対応できるため）。
SSR にすると、ページをリクエストするたびにレンダリングすることになるのでページの表示が遅くなってしまいますが、一番手っ取り早く対応できるので SSR を選択しました。
後日、他の方法にもチャレンジしてみたいと思います。
コードの変更内容
以下のリンクに変更した内容を記載しています。
すぐに ISR に戻せるように、コードは削除せずにコメントアウトで対応しています。
さらなる対応
今回の対応内容である SSR ではページが表示されるまでに時間がかかってしまいます。
ページ遷移をする際にページが固まったように見えるかもしれません。
この場合の対処方法としてローディングアニメーションを追加するという対策もありそうなので、こちらの方法を試してみようと思います。
【Notion AI の要約】 このブログ記事は Notion で書かれたブログで、画像のリンク切れ問題があることが解説されています。API 経由で取得した画像リンクがセキュリティ上の理由で1時間で切れてしまうため、解決策として SSR に切り替える方法が紹介されています。ただし、SSR に切り替えるとページの表示が遅くなるため、ローディングアニメーションを追加するなどの対策も必要だとしています。 【記事の文字数】1212 文字