• Home
  • A W E S O M E . の画像のリンク切れ問題に対応する

A W E S O M E . の画像のリンク切れ問題に対応する

thumbnail

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 を選択しました。

    後日、他の方法にもチャレンジしてみたいと思います。

    コードの変更内容

    以下のリンクに変更した内容を記載しています。

  • Change SSG to SSR · chabesu/awetion@f4ef81c
  • すぐに ISR に戻せるように、コードは削除せずにコメントアウトで対応しています。

    さらなる対応

    今回の対応内容である SSR ではページが表示されるまでに時間がかかってしまいます。

    ページ遷移をする際にページが固まったように見えるかもしれません。

    この場合の対処方法としてローディングアニメーションを追加するという対策もありそうなので、こちらの方法を試してみようと思います。

    avatar

    PROFILE

    チャベス

    Product Development Engineer, Notioner

    TAG