- 문제상황
-
지난 번, image 최적화를 위해 img 태그를 next/image로 변경한 적이 있었다.
-
시간이 지나면서, 원치 않는 이미지가 보이는 문제를 발견했다.
ex) 상단 nav 바에 있는 이미지가 다른 이미지로 대체되어 보이는 등의 문제
-
router 가 변하면, 다시 원하는 이미지로 변경되는 것을 확인할 수 있었다.
- 원인
- 원인을 찾아보려고 했으나, 정확한 원인을 파악하는 것은 어려웠다.
- 추측으로는 next/image 서버 내에 캐싱처리하는 것과 서버의 캐싱처리가 꼬이는 것 같았다.
next/image 에서는 캐싱 역시 지원하고 있습니다.
이미지 요청시에 해당 이미지가 캐시에 존재할 경우, 캐시에 저장된 이미지를 리턴합니다.
캐시에 존재하지 않을 경우, 최적화 작업을 진행한 후 지정된 캐시 폴더에 이미지를 캐싱하게 됩니다.
여기서 주의할 점은 캐시키를 구성하는 요소에 파일 경로 뿐만 아니라
width, quality 값도 포함하고 있기 때문에
동일한 이미지라도 최적화 파라미터가 달라지게 된다면 캐싱 작업을 다시 진행하게 됩니다.- 해결방법
(1) next/image를 다시 img로 원상복구…ㅠ
=> 이때의 문제점
(1) next/image에 맞춰놨던 css가 꼬여서 다시 css를 설정해주어야했다.
(2) next/image를 사용하면 placeholder 등의 기능으로 src를 load하기 전까지 콘텐츠를 가득 채워 보여주지만, 해당부분을 걷어내보니 다시 콘텐츠가 없어졌다가 나타나는 문제점을 발견했다.
⇒ 이 문제를 해결하기 위해, skeleton 기능을 추가하기로 결정했다.
=> 그리고 결국, 이미지 최적화를 위해 다시 next/image로 전환해야한다.
technology blog