昨日は、ブログの画像が４０４となる現象になり、慌てて、修正していました。

Notionにアップロードした画像は、一定時間経つと、画像のURLが置き換わってしまう問題がありました。

サーバー側が毎回リクエストのたびにレンダリングしてくれるSSRならこの問題はないのですが・・・

ISRやSSGなど、あらかじめレンダリングしておいてユーザーにデータを表示する手法では、４０４になってしまいます。

そこで、よくやる手法として、useSWRなどを用いて、期限が切れた画像URLかを判定する関数を作り、条件が一致した場合は、新しいURLを取得して置き換えるなどの方法があるみたいです。

が、私の場合、Notionのブロックをライブラリを使ってから変換するみたいな流れを通っているので、useSWRが使えませんでした。

とりあえず、URLを取得して、古いURLなら画像URLを変換する

画像が古くなって４０４を返す場合はonErrorという関数で検知して画像URLを置き換えるという処理を施しました。

記事本文に関しては、記事本文が古かったら丸ごと置き換える処理をしているため若干ページが重いです。

悲しいことに、表示速度を上げたいのですが、なかなかいい方法が思いつきません（泣

ということで、今回は、ブログの画像４０４の問題解決？についてでした。

追記：ページ表示速度改善しました。（2023/4/21)

ページ表示速度も改善しました。

とは言っても、キャッシュが生成されてからなんですけどね。

Next.jsのISRの仕様で、on-demandといって任意のタイミングでページを再生成する機能があります。

これにより、記事が更新された時と、画像のURLの発行期限が切れていたら、ページを再生成させて、その間はキャッシュを表示させるというISRの良さを引き出すことができたと思います！

画像がうまく表示されなくても更新すれば画像が見られるようになります。

記事内本文のものは先にブロック解析したものを表示させてから、ブログカードなど表示するように非同期処理で対処したら速度が改善しました。

OGP画像に関しては毎回、URLが変わってしまうため、表示されない問題があったのですが、

参考サイトを見つけて処理したら、対応できたのでとてもありがたかったです！

https://alpacat.com/blog/solution-to-image-url-expiration/

新しく作るNotionの見本ブログの方では、ライブラリに頼らず、ブロックをHTMLに変換記述できるように対応できたらと思います、余力があればですけど・・・。

といった状況で実は裏ではコソコソと色々な処理を書いていたりしてました。

ブログの更新頻度に関しても上げていきたいと思いますので引き続きよろしくお願いします！

Notionの画像をブログに引っ張ってくると、時間が経つと画像のURLが置き換わってしまう問題がありました。

Notionからの画像の有効期限が切れる問題解決

Notionからの画像の有効期限が切れる問題解決

この記事を書いた人