Vue Storefront 2에서 캐시를 활성화하는 방법

캐시는 특정 페이지의 두 번째 로드를 크게 개선하고 일반적으로 사용자 경험을 개선할 수 있는 현대 웹 개발에서 매우 중요한 개념입니다. 아직 익숙하지 않다면 얼마 전에 읽을 수 있는 기사를 게시했습니다.

Vue Storefront 캐시는 브라우저와 서버 모두에서 활성화할 수 있습니다. 첫 번째는 Cache-Control 응답 헤더를 사용하여 브라우저에서 응답을 캐시하고 두 번째는 Redis과 같은 캐시 드라이버를 사용하여 모든 페이지를 캐시합니다.

브라우저 캐시

브라우저 수준에서 캐시를 활성화하기 위해 Vue Storefront에서 here 확인할 수 있는 패키지http-cache를 사용합니다.

설치

이 패키지는 캐싱 기능을 위해 렌더링 후 문서에 http-cache 헤더 추가를 처리합니다.

먼저 종속성을 설치하십시오.

yarn add @vue-storefront/http-cache

다음으로 modules 의 nuxt.config.js 배열에 추가합니다.

['@vue-storefront/http-cache']

그리고 그게 다야. 이 모듈 덕분에 홈페이지, 카테고리 페이지 및 제품 페이지는 브라우저가 적절하게 캐시할 수 있도록 하는 특정 기본값과 함께 응답 헤더Cache-Control를 자동으로 반환합니다. 몇 가지 구성 옵션을 보려면 다음 섹션을 확인하십시오.

구성

이 패키지를 사용하면 패키지의 특정 속성을 구성하여 다르게 작동하고 필요에 가장 잘 맞도록 할 수 있습니다.

기본

이 속성을 사용하면 처음에 http-cache로 설정된 max-age=60 헤더의 기본값을 재정의할 수 있습니다.

['@vue-storefront/http-cache', {
  default: 'max-age=120'
}]

일치 경로

선택한 경로에 대한 값을 사용자 정의합니다http-cache. 와일드카드에 *를 사용할 수 있습니다. http-cache 헤더를 제거하려면 none 값을 사용하십시오.

['@vue-storefront/http-cache', {
  matchRoute: {
    '/': 'max-age=240',
    '/p/*': 'max-age=360',
    '/c/*': 'none'
  }
}]

서버 캐시

서버 측에서 캐시를 활성화하기 위해 Vue Storefront에서 제공하는 패키지, 즉 @vue-storefront/cache 및 @vue-storefront/redis-cache 를 사용할 수도 있습니다.

먼저 필요한 종속성을 설치하겠습니다.

yarn add @vue-storefront/cache
yarn add @vue-storefront/redis-cache

다음으로 패키지가 올바르게 작동하는 데 필요한 구성을 추가하겠습니다.

// nuxt.config.js

export default {
  modules: [
    ['@vue-storefront/cache/nuxt', {
      invalidation: {
        // Invalidation options
      },
      driver: [
        '@vue-storefront/redis-cache',
        {
          defaultTimeout: 86400,
          redis: {
            host: 'localhost',
            port: 6379,
            password: 'password'
          }
        }
      ]
    }]
  ]
};

Vue Storefront에서 서버 캐시를 사용하는 프로세스를 더 잘 이해하려면 다음 문서를 확인하십시오.

Integrating Cache Driver

SSR Cache

Redis Cache

요약

잘했어요! Vue Storefront 애플리케이션의 브라우저와 서버 환경 모두에서 캐시를 활성화했습니다. 이렇게 하면 전자 상거래 웹사이트의 성능이 1마일 향상됩니다!