캐시 ㅎㅎ

이 글 읽고 복습겸 씁니다.

이 캐시 아닙니다

캐시

캐시는 웹사이트 로딩시간을 줄이는데 사용된다. 어떤 데이터를 서버에서 받아온 후, 서버보다 가까운 곳에 저장하여 필요할때마다 더 빠르게 불러오는 프로세스이다. 캐시를 무분별하게 사용하면 stale한 데이터(최신화가 필요한 과거 데이터)를 노출하게 되므로 적절히 사용해야 한다.

 

브라우저 캐시의 Cache-Control

브라우저 캐시는 브라우저나 HTTP 요청을 하는 클라이언트에 의해 이루어지는 캐시이며 HTTP캐시라고도 하는데, 단일 유저를 대상으로 하는 Private Cache이다.

 

클라이언트에서 데이터를 받아오는 가장 빠른 방법은 서버에서 받아오지 않는 것이다.

그럼 최신화되지 않은 데이터를 굳이 서버에서 받아오지 않고 캐싱해서 쓰는 것이 현명한 방법이다.

이런 관점에서 HTTP 헤더의 Cache-Control 필드를 통해 브라우저내에서 캐시를 어떻게 컨트롤 할 지 정의할 수 있다. (MDN 캐시)

 

mdn에 나와있지만 중요한 속성 몇가지만 나열하자면

no-cache

캐시를 안쓴단게 아니다. 캐시를 써도 되는지 서버에 한번 물어보고 된다하면 캐시를 보여주는 것

no-store

아무것도 캐싱하지 않겠다는 것. 개인정보를 다룰때는 no-store를 쓰자.

캐시 막기

헤더에 no-cache, no-store, must-revalidate를 사용하면 된다.

        const response = await axios.get('https://api.example.com/data', {
          headers: {
            'Cache-Control': 'no-cache, no-store, must-revalidate',
          },
        });

 

정적 에셋 캐싱

변경되지 않을 asset 파일들은 적극적으로 캐싱할 수 있다. 예를들면 이미지, css파일 같은 것들.

Cache-Control:public, max-age=31536000

 

해당 리소스를 공개적으로 캐싱하며, 캐시의 유효기간은 1년이라는 뜻이다.(1년은 좀 너무 길군)

 

프록시 캐시

프록시캐시는 Private한 브라우저 캐시와 달리 Shared Cache 이다.  여러 사람에 의해 재사용되는 응답을 저장한다.

 

CDN (Content Delivery Network)

SSG의 전부인 CDN, 분산된 네트워크다.

CDN은 성능 향상을 위해 클라이언트의 요청이 같은 서버로 가는 것을 막는다. 원 서버가 아닌 다른 서버로 가도록 분산시키는 역할을 하는데 이 과정에서 캐싱을 한다.

 

첫 요청은 원 서버에서 받지만 그 이후에는 CDN에서 받는다.

https://www.alibabacloud.com/ko/knowledge/what-is-cdn

SSR은 최초렌더링, 페이지 전환시마다 html을 서버에서 받아오는 방식이다. 이를 해결하기 위해 나온 SSG는 빌드시에 html을 CDN에 올려놓고 그 이후 캐시된 html을 사용하는 것이다.

 

정리

캐시는 UX 개선을 위해 필수적이다. 하지만 무분별하게 사용하여 stale한 데이터를 노출시키지 않도록 주의하자.