🙅

「NEXTJS / S3 画像アップロード」画像を更新する時にこれやっちゃダメ！

2021/07/23に公開

BEYONDMAGのマガジンサイトに連載と特集機能の画像アップロードを実装したときに、気づいたメモです。

前提🙇🏽‍♂️

本記事は、コーディングの仕方を教えるよりかは、ベストプラクティスを教えます。

画像アップロードのコーディングを学びたい人はこの記事を参考にしてください。

「画像を更新する時ってどうやるんだろう？」 という疑問持っている人いっぱいいますよね？

僕もその一人です😅。

僕が知っている画像の更新方法は二つあります🤔

つまり画像をS3に同じURLかつ違う画像のBINARYで更新する

しかし！！
このやり方で実装するとSTALE IMAGE PROBLEM（キャッシュの理由で、同じ画像URLを使うと中身が変わっても前の画像が表示される）という問題が発生するため、

FRONTENDの画像表示のところに画像のURLの後ろにtimestamp queryを入れる必要があります。

<img src={`${url}?${timestamp}`} />

つまり前の画像をS3から削除し、新しいURLを生成し、そのURLで更新する

圧倒的に🎉やり方2🎉がいいです!

やり方1「同じURLを使用し、画像の中身だけ変える方法」はすごく危ないです！！やっちゃダメ！！🙅🏽🙅🏽🙅🏽

やり方1で実装すると画像LOOP Requestのバグが発生しやすいです。timestampは基本秒で変わるので、1秒ごとにあたらしい画像のリクエストを取りに行くので、おすすめはしないです。
そしてやり方1で実装するとキャッシュの機能が使えなくなるのでサイトのパフォーマンスがすごく悪い

やり方２で実装するとBROWSERはURLが変わっている画像のみREQUESTしに行くので、URLが変わっていない画像とかだとキャッシュとして保存され（キャッシュをフール活用できます）

画像のアップロードで画像の更新機能を実装するとき、同じURLで保存しない方がいいとわかりました。🙋🏽