"304(수정되지 않음)"응답에서 사용자 정의 헤더가 누락되는 이유는 무엇입니까?

304 (Not Modified) 응답은 요청 중인 리소스가 변경되지 않은 경우1 초기200 (OK) 응답 이후에 이루어진 후속 요청에서 전송해야 하는 정보의 양을 최소화합니다.

이것은 특히 이미지와 같은 더 큰 자산이 관련된 웹 사이트에 성능상의 이점이 있습니다.

응답에서 사용자 지정 헤더를 사용하는 웹 사이트를 개발하는 경우 304 응답이 200 응답과 다른 헤더 관련 동작을 주목할 가치가 있습니다.

웹 사이트 방문자가 네트워크 요청을 검사하고 200 응답을 보면 응답에 대해 정의된 사용자 정의 헤더뿐만 아니라 리소스 캐싱과 관련된 다음 헤더도 볼 수 있습니다2. :

캐시 제어

콘텐츠 위치

날짜

ETag

만료됨

바리

그러나 304 응답에서 사양은 1을 자세히 설명합니다.

... a sender SHOULD NOT generate representation metadata...unless said metadata exists for the purpose of guiding cache updates.

이는 리소스가 브라우저에 캐시된 경우 동일한 요청이 '캐시 안내 목적'을 제공하지 않는 경향이 있기 때문에 일반적으로 추가 메타데이터(이 경우 사용자 정의 헤더)가 누락된 응답을 수신함을 의미합니다. 업데이트'.

이 동작을 설명하기 위한 예로 Netlify가 갖고 있는 Next.js 프레임워크용 데모 사이트를 사용하겠습니다. 관심 있는 특정 페이지를 찾을 수 있습니다here.

브라우저 콘솔의 '네트워크' 탭을 보면 페이지에서 이미지를 가져오는 요청이 자세히 살펴보겠습니다. 다음과 같아야 합니다.
GET https://netlify-plugin-nextjs-demo.netlify.app/_ipx/w_3840,q_75/%2F_next%2Fstatic%2Fmedia%2Funsplash.9a14a3b9.jpg?url=%2F_next%2Fstatic%2Fmedia%2Funsplash.9a14a3b9.jpg&w=3840&q=75
및 200 응답 헤더:

HTTP/2 200 OK
age: 0
cache-control: public, max-age=0, must-revalidate
content-type: image/jpeg
date: Tue, 23 Aug 2022 01:05:36 GMT
etag: "3b-XMihzCU33fI+mTMhk6V4yc9TZww"
server: Netlify
strict-transport-security: max-age=31536000
x-nf-request-id: 01GB43QGZ949EAFF6HBMX480RG
x-test: foobar
X-Firefox-Spdy: h2

이제 페이지를 새로 고치면 대신 해당 요청에 대한 응답304이 표시됩니다.

HTTP/2 304 Not Modified
cache-control: public, max-age=0, must-revalidate
date: Tue, 23 Aug 2022 01:08:03 GMT
etag: "3b-XMihzCU33fI+mTMhk6V4yc9TZww"
server: Netlify
x-nf-request-id: 01GB43W0VGYVR87CHSMZ70T4HQ
X-Firefox-Spdy: h2

x-test 응답에 대한 목록 하단 근처에 있는 200 사용자 정의 헤더가 이제 304 응답에서 어떻게 누락되었는지 확인하십시오.

마무리

나는 최근까지 304 응답의 데이터 최소화가 응답 헤더로 확장된다는 사실을 깨닫지 못했습니다. 따라서 이 문제를 겪었고 왜 이런 일이 발생하는지 약간 의아해하는 사람들을 위해 이렇게 빨리 설명이 도움이 되었습니다.

즐거운 코딩하세요!



https://httpwg.org/specs/rfc7232.html#status.304 ↩

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304 ↩