チャべログ
私は Notion API を使ってポートフォリオサイトを作っています。
このポートフォリオサイトは ISR を使っていますが、画像のリンク切れの問題がありました。
この画像のリンク切れを解消するために、ISR から SSR に切り替えることにしました。
ポートフォリオサイトは以下です。
.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240113%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240113T094330Z&X-Amz-Expires=3600&X-Amz-Signature=04e76fee8a2c54a2b925fc3e20ff2420b6dfeaaad478633a8ea0f91694e28ded&X-Amz-SignedHeaders=host&x-id=GetObject)
経緯
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 theexpiry_time
property of the file object.
元々このポートフォリオサイトでは ISR を使用していたため、画像リンクが切れてしまうとページを更新するまでは画像リンクが切れてしまう仕様になっていました。
対応
この画像のリンク切れの対応方法は、このブログ（easy-notion-blog）の開発者である おとよさん の記事に詳しく書かれており、とても参考になりました。
上記の記事を参考にすると、対応方法は3つありそうです。
- SSR に切り替える
- ISR + SWR で対応する
- 画像をキャッシュする
今回は、1 の SSR に切り替える方法を選択しました（一番手っ取り早く対応できるため）。
SSR にすると、ページをリクエストするたびにレンダリングすることになるのでページの表示が遅くなってしまいますが、今回のポートフォリオサイト程度のコンテンツ量ならばそこまで遅くならないだろうと思い、選択しました。（本当は 2. と 3. の実現方法がまだよくわかっていないということが理由でもあります。）
変更した内容は以下です。
Notion Blog の画像のリンク切れをどうするか
実は、このブログ以外にも最近使い始めた Notion Blog があります。こちらも同様に画像のリンク切れの問題がありました。
このブログはデフォルト仕様では SSG を使っています。なぜ SSG なのかというと、この Notion Blog はもともと、MDX (マークダウンに JSX を埋め込める）を使用して記事を書くシステムを Notion に対応させたという経緯があるからです。 MDXで記事を書くのであれば、記事を書くたびにデプロイすることになるので SSG で良かったということです。
しかし、Notion でブログを書くことになると上記の画像のリンク切れ問題があったり、Notion 上で記事を更新してもブログに内容が反映されないという問題が発生するので、 SSG では何かと不便です。
そこでこちらのブログも SSR に切り替えました。ただし、ブログとなるとコンテンツ量も多くなってページの読み込みの遅さが気になりそうなので、いずれは ISR + SWR で対応するか、画像をキャッシュする方法で対応してみたいと思っています。
ISR + SWR での対応方法は、 easy-notion-blog で対応しているので参考にさせてもらえそうです。
画像をキャッシュする方法についても、easy-notion-blog のバージョン 0.6 で対応していたようです。ただし、おとよさんの記事によると以下のような問題もありそうなので注意が必要です。
バージョン0.6では、ビルド時に記事中の画像を全て取得しVercelに保存していました。しかし、ここは推測ですが、画像サイズが大きいなどの理由（他にも原因がありそう）で画像の取得に失敗することがあるようでした。
そうなってしまうと、常に画像が表示されなくなってしまいます。
ちなみに画像をキャッシュする方法は、Notion アンバサダーの円谷さんのブログでも採用されています。円谷さんに聞いたところ、円谷さんのブログの場合は上記のような問題は起こっておらず、キャッシュする容量問題とかも起こっていないようなので、参考にできるかもしれないです。
このブログについては以下のリンクから飛べるので、興味のある方は見てもらえると嬉しいです。easy-notion-blog のようにさまざまな Notion のブロックに対応はしておらず、少し修正したい箇所もいくつかありますがゆっくり触っていきたいと思います。
終わりに
今回、画像のリンク切れ問題を修正するためにいろいろな記事を見たり、本を読んだりしました。
3か月前に 上記のおとよさんの記事を読んだときは内容が全く理解できませんでしたが、今回色々調べたことでおとよさんの記事がとても分かりやすい記事だということを理解することができました。
引き続き easy-notion-blog や別の Notion Blog を触りながら、勉強していこうと思います。
【Notion AI の要約】 このブログ記事は、ポートフォリオサイトのリンク切れ問題を解決するため ISR から SSR に切り替えた経緯を述べています。画像のリンク切れ問題について、3つの解決方法があり、今回は一番手っ取り早く対応できる SSR に切り替えました。また、Notion Blog の画像のリンク切れ問題にも言及しており、SSG から SSR に切り替えたことを紹介しています。 【記事の文字数】2130 文字