Etag를 활용한 브라우저 리소스 캐싱

Etag

😎 ETag HTTP 응답 헤더는 특정 버전의 리소스를 식별하는 식별자이다. (보통 지문으로 비유된다)
서버는 각 리소스에 대해서 Etag를 생성하고 버전을 관리한다.
웹 서버가 내용을 확인하고 변하지 않았으면, 웹 서버로 full 요청을 보내지 않기 때문에, 캐쉬가 더 효율적이게 되고, 대역폭도 아낄 수 있게 해준다.

 

🍎 특정 URL의 리소스가 변경되었을 때 Etag가 변경되어 새로 생성된다.
ETag 는 지문과 같은 역할을 하면서 다른 서버들이 추적하는 용도에 이용되기도 한다.
ETag 를 비교하여 리소스가 서로 같은지의 여부를 빠르게 판단할 수 있지만, 서버에서 무기한으로 지속될 수 있도록 설정할 수도 있다.

 

👻 ETag는 주로 웹 캐시 관리에 사용되며, 캐시된 리소스가 여전히 유효한지 확인하는 데 도움이 된다. 

만약 리소스가 변경되었다면, 새로운 ETag가 생성되고 클라이언트는 이를 기반으로 서버로부터 새로운 데이터를 받아오도록 설계된다.

 

Etag는 Strong과 Weak 두 가지 종류가 있다.

W/로 시작하면 Weak이다. 그렇지 않으면 Strong이다.
- Next.js에서는 최초 HTML 요청은 Strong, 그 후로 발생하는 API 요청은 Weak인듯?

• Strong / Weak Etag는 의미상 동일하지만, 바이트단위로 보면 동일하지 않다.
• 바이트 범위로 요청이 사용될 때, Weak Etag는 캐싱을 방지한다. 반면, Strong Etag는 캐싱을 한다.
• 즉, 일치하는 Strong ETag는 파일이 바이트 단위로 동일함을 보장하는 반면, 일치하는 Weak ETag는 내용이 의미상 동일하다는 것을 나타낸다.

🙌 서버는 응답 해더에 Etag를 포함한 응답을 하게 되고, 클라이언트가 다시 해당 리소스를 호출할 때, 이 Etag를 요청 헤더의 If-None-Match에 담아 보내어 데이터가 최신인지 확인한다.
만약 데이터의 변경이 없어 Etag가 동일하다면, 서버는 304 Not Modified 응답을 반환하게 된다.
이때, 클라이언트에 저장된 캐시값을 사용하게 된다.

• Etag를 사용하여 사용자를 식별하는데 사용할 수도 있다.

ETag는 다양한 방법으로 생성될 수 있다. 

• 파일의 내용을 해시하여 생성한다.
• 리소스의 최근 수정 시간 등을 조합하여 생성한다.

Next.js에서 Etag

• Next.js 프로젝트는 Etag가 기본으로 생성된다. (현재 프로젝트도 화면 html HTTP GET 요청 header response를 확인하면, Etag가 있음을 확인할 수 있다.)

module.exports = {  generateEtags: false }

• next.config.js 에서 해당 옵션을 비활성화할 수 있다.

Node.js Server에서 Etag

• 설치

npm i etag

• 사용법

const etag = require('etag')
res.setHeader('ETag', etag(body))

 

🎉 참고 문서

https://nextjs.org/docs/pages/api-reference/next-config-js/generateEtags
https://yozm.wishket.com/magazine/detail/1772/
https://yozm.wishket.com/magazine/questions/share/i6MB9h5hu0AXnNBI/
https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/ETag
https://en.wikipedia.org/wiki/HTTP_ETag
https://www.npmjs.com/package/etag
https://stackoverflow.com/questions/3043729/weak-etags-and-last-modified?rq=3