Next에서 image, font 최적화 어케했누??
Next 왜 쓰는데??
그야 SSR로 SPA로는 할 수 없는 SEO최적화도 되고,
FE개발자가 해야하는 일이던 Image, font 최적화도 해주고,
디렉토리 기반으로 라우팅도 해주고,
Layout, Suspense, ErrorBoundary들도 file Conventions으로 제공해주고
DX가 좋잖아..??
근데 요즘엔 검색 봇들이 SPA도 렌더링 기다렸다가 긁어 가잖아
그치… 그렇긴한데 SSR로 바로 띄워주는게 점수는 더 높다고 했어! 너도 한 번 더 귀찮게 하는거 보다 바로 보여주는 애가 더 좋잖아
그럼 Image, font 최적화는 어떤걸 어떻게 해주는데?
어..? 음.. 그게…음…그러게..?
Image를 사용할때 경로를 적는게 아닌 import해서 꽂아줘야 되니깐 아마.. SSG처럼 빌드 시 미리 사이즈 줄여서 캐싱 해놓는거 아닐까..?
사실 잘 모르겠어ㅎ
그래서 찾아본 Next의 image, font 최적화 방식!!
을 정리할까했지만 화해 기술 블로그에 너무 잘 정리되어있는 글이 있었다..ㅎ
글을 읽고 좀 더 찾아보며 추가로 알게 된 내용을 합쳐보았다.
Next에서 image에서 제공해주는 기능
- 장치의 크기에 맞춘 적절한 이미지 사이즈와 최신 이미지 포맷 지원
- Web Vitals의 CLS 발생을 방지
- 레이지 로드를 기본적으로 사용하고 있기 때문에, 뷰포트에 노출됐을 때 이미지 로드. 선택적으로 블러링 처리한 이미지를 먼저 노출하는 기능
- 이미지 리사이징. 외부 이미지도 리사이징 가능
이다. 이러한 기능이 가능한 동작원리는
NEXT.JS 서버는 동작 시, /_next/image 라는 이미지 최적화를 위한 라우트를 만들고, 내부에서 이미지 최적화 모듈을 사용하여 이미지를 최적화한다.
그리고 Next.js에 요청이 들어오면(Next/image 컴포넌트를 사용하면)dist 폴더 밑에 cache/images 폴더에 최적화한 이미지를 동적으로 만들고, 이후에 동일한 요청에 대해서는 이미 만들어 놓은 최적화한 이미지를 캐시로서 재사용한다.
여기서 최적화 할 수 있는 핵심이 나와있다.
- 내부에서 이미지 최적화 모듈로서 사용해서 사이즈를 줄이고(Webp, AVIF로 변환)
- 이미지를 캐시해서 재사용하여 속도를 향상한다.
결론적으로 Next에서 image 최적화는 SSG처럼 빌드 시 캐싱하는게 아닌 1회 요청 시 캐싱한다(2개중 하나는 맞안다! 얏호-!)
이미지 최적화 모듈로써는 Sharp 라이브러리를 추천하는데 기본 이미지 최적화 모듈로는 Sqoosh 라이브러리를 사용한다.
그 이유는 Squoosh가 빠르게 설치할 수 있고 개발 환경에 적합하지만 서최적화 성능은 Sharp가 더 좋기 때문에 production 레벨에서는 Sharp를 사용하기를 추천한다.
캐싱을 한다라… 언제까지?
이미지를 캐싱한다는 것을 알고 의문이 든 것은 캐싱 무효화 시점이었다.
TQ의 핵심 기능 중 하나는 캐싱이고 이를 잘 사용하기 위해서는 캐싱값의 상태를 잘 다뤄야 한다고 생각한다. 언제까지 유효한 캐싱값인지를!
그러면 Next에서 image를 캐싱하는 것은 언제까지 유효할까?
공식문서를 찾아보니 next.config.js에 minimumCacheTTL라는 속성값을 세팅해 줄 수 있었다.
module.exports = {
images: {
minimumCacheTTL: 60,
},
};
이렇게 만료시간을 세팅해주고 이미지 요청이 시작되면 <distDir>/cache/images 에 저장된 이미지를 불러올때 만료시간과 업스트림 이미지 Cache-control 헤더(s-maxage |
max-age) 중 더 큰 값과 비교하고 처리한다. |
글로 쓰니깐 보기 힘들다 수도코드 렛츠기릿
Math.Max(minimumCacheTTL, s-maxage || max-age) > 시간
? 캐싱값 사용
: 백드라운드로 다시 최적화 후 새 만료일과 함께 캐시에 저장
만능임?
그런게 어딨어~
SVG는 최적화 해주지 않는다.(굳이 필요없고 CSP 헤더가 없으면 취약점 발생가능)
또한 애니메이션 이미지 경우 최적화를 우회해서 원본을 보여준다.
SVG경우 아래와 같이 next.config를 작성하면 default Optimization API를 사용할 수 있다.
module.exports = {
images: {
dangerouslyAllowSVG: true,
contentDispositionType: "attachment", // 브라우저가 이미지 강제 다운로드하도록 설정
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;", // 이미지에 포함된 스크립트 실행되지 않도록 설정
},
};
제목에는 image/font라 적고 image 이야기만 했다ㅎ
근데 font는 큰 틀에서 image와 동일하고 디테일한 부분에서 신경쓸게 없다!
그래서 font는 어떻게 최적화한다고?
next/font 안에 모든 글꼴 파일 이 자제 호스팅되어 내장되어있다. 덕분에 렌더링 후 폰트가 적용되며 layout이 변경되는 일 없이 웹 글꼴을 최적으로 로드할 수 있다!
댓글남기기