Image태그와 캐싱

const storageImageUrl = await uploadAvatar(
        profiles?.id || '',
        previewImg
      );

uploadAvatar에 매개변수로 프로필의 아이디, 파일을 넘긴다.

  const fileExt = file?.name.split('.').pop();
  const fileName = `${crypto.randomUUID()}.${fileExt}`;
  try {
    const supabase = createClient();
    const { data, error } = await supabase.storage
      .from('profileAvatars')
      .upload(`${userId}/${fileName}`, file, {
        upsert: true
      });

    if (error) {
      console.error('Error uploading image:', error);
      return null;
    }

    return `${
      process.env.NEXT_PUBLIC_SUPABASE_URL
    }/storage/v1/object/public/profileAvatars/${data.path}?${Math.random()}`;
  } catch (error) {
    console.error('Error uploading image:', error);
    return null;
  }
};

원래의 방식

원래는

export const uploadAvatar = async (userId: string, file: File) => {
const { data, error } = await supabase.storage
      .from('profileAvatars')
      .upload(`${userId}/avatar.png`, file, {
        upsert: true
      });
 return `${
      process.env.NEXT_PUBLIC_SUPABASE_URL
    }/storage/v1/object/public/profileAvatars/${data.path}`;

이렇게 내가 임의로 avatar.png라고 이름을 정해서 저장을했었다. 이유는 이래야 유저아이디 당 하나의 파일이 생기고 upsert:true로 해놨으니 같은 이름으로 업데이트 시키는게 스토리지 용량을 줄이는데 도움이 될거라고 생각.
근데 파일 이름이 같아서 그런지, 자꾸 전의 캐싱된 이미지가 나오는것.
검사로 들어가서 이미지 눌러서 들어가면 원하는 이미지가 나오는데 자꾸 브라우저 상에 새로운 이미지를 못그린다.
그래서 url뒤에 랜덤값을 넣었다.

 return `${
      process.env.NEXT_PUBLIC_SUPABASE_URL
    }/storage/v1/object/public/profileAvatars/${data.path}?${Math.random()}`;

이렇게!!
두번째 방법은 애초에 파일이름을 avatar.png로 지정하지 말고

const fileExt = file?.name.split('.').pop();
  const fileName = `${crypto.randomUUID()}.${fileExt}`;
  
   const { data, error } = await supabase.storage
      .from('profileAvatars')
      .upload(`${userId}/${fileName}`, file, {
        upsert: true
      });

이런식으로 파일의 이름을 url로 설정하는것이다.
근데 이러면 스토리지에 저장되는게 유저아이디/파일이름 이런식으로 저장되서 유저가 프로필을 바꿀때마다 (파일이름별) url이 생겨서 하나의 유저아이디에 여러개의 파일들이 생기게된다.

그래서 나는 하나의 파일로 관리하는게 좋을 것 같다는 생각을.. 했다.
내가 한것처럼 파일 이름을 통일 시켜놓고 관리하는게 좋은 방법인지는 모르겠다.

그리고 Nextjs 에서 프로필 변경을 구현하다보니
넥스트의 Image태그가 왠지모르게 평소의 img태그보다 캐싱이 더 많이? 되는 느낌이 들었다.
이미지 캐싱때문에 고생할때, Image태그 쓸때와 img태그쓸때 img보다 Image를 쓸때 더 이미지가 안바뀌는?(캐싱땜에 바꼈지만 브라우저에 못그리는문제)가 더 자주 발생한다는 것을 깨닫고
넥스트의 Image태그가 어떤 역할을 해주는지 찾아봤다

NextJS의 Image태그

대표적인 기능 3가지

• lazy loading: 기본적으로 lazy-load 설정으로 되어있으며 eager 옵션이나 priority 설정으로 해제할 수 있다. 필요한 데이터만 먼저 로드하고 바로 필요하지 않는 데이터는 lazy loading시킨다. 하지만 중요한 데이터라면 그 기능을 priority true로 끌 수 도 있음.
• 이미지 사이즈 최적화
• placeholder 제공: 이미지로드 전 원하는 이미지의 크기로 placeholder를 제공하여 사이즈 때문에 발생하는 CLS(Cumulative Layout Shift) 방지
  https://github.com/joe-bell/plaiceholder
  https://nextjs.org/docs/pages/api-reference/components/image#placeholder

Next/image 컴포넌트는 최초 이미지 요청이 왔을 때 이미지를 최적화한 후 캐싱한다는 것을 알았다.
런 타임때 요청이 들어오면, 이미지를 최적화시켜 캐싱하고 그 캐싱된 데이터를 재사용한다.
.next(dist) 폴더에 캐싱한다.
.next의 cache폴더아래 images라는 폴더가 생긴다.(이미지 요청이 들어왔을 시)
이 폴더에 이미지를 캐싱하고 이후 요청에서는 캐싱해둔 이미지를 사용하는 것

그래서 <img> 태그보다 캐싱이 더 잘되었던것같다....
찾아보니 Next/image태그 기능이 생각보다 괜찮네...