alova 6. cache

Bora Im·2024년 7월 23일

응답 캐시는 서버에서 클라이언트로 반환하는 데이터를 캐시하는 기술입니다. 서버 데이터를 재사용할 수 있으면 반복적인 요청 전송을 방지합니다. 사용자 요청에 즉시 응답할 수 있을 뿐만 아니라 서버 리소스도 절약할 수 있습니다.
다양한 캐싱 시나리오에 따라 alova는 메모리 모드(memory mode), 캐시 자리표시자 모드(cache placeholder mode) 및 복원 모드(restore mode)라는 3가지 모드를 제공합니다. 자신에게 맞는 것을 선택하면 됩니다.
또한, 캐시 연산(cache operation) API를 이용하면 캐시를 자유롭게 추가, 수정, 삭제할 수 있을 뿐만 아니라 캐시 매칭 규칙도 맞춤 설정할 수 있습니다.

Cache Mode

캐시 모드는 전역 또는 요청 수준과 같은 다양한 세부 수준으로 설정할 수 있습니다. 전역적으로 설정되면 동일한 alova 인스턴스에서 생성된 모든 메소드 인스턴스가 설정을 상속합니다.

캐싱 모드를 전역적으로 설정해야 하는 경우 본 섹션 하단의 [전역 설정 캐시 모드]를 참조하세요.

Memory mode (default)

메모리 모드는 캐시를 메모리에 넣는 방식으로, 페이지 캐시를 새로 고칠 때 페이지 캐시가 무효화된다는 의미로 가장 일반적으로 사용되는 캐시 모드입니다. 메모리 모드는 일반적으로 짧은 시간(분 또는 초)에 동일한 데이터에 대한 빈번한 요청으로 인한 성능 소모를 해결하는 데 사용됩니다.

예를 들어, 작업 세부사항 페이지를 작성할 때 사용자가 작업 목록을 자주 클릭할 것으로 생각할 수 있습니다. 사용자가 특정 내용을 반복적으로 볼 때 인터페이스를 반복적으로 요청하지 않고 즉시 데이터를 반환할 수 있다면 응답 속도를 향상시키는 동료도 서버에 대한 부담을 줄일 수 있습니다.

이 시점에서 우리는 작업 세부사항 메소드 인스턴스에 대한 응답 데이터 캐시를 설정할 수 있습니다. 단위는 밀리초(ms). Infinity(무한대)로 설정하면 데이터가 절대 만료되지 않는다는 뜻이고, 0이나 음수로 설정하면 캐싱이 없다는 뜻이다.

alovaInstance.GET('/todo/list', {
  //...
  localCache: {
    mode: 'memory',
    expire: 60 * 10 * 1000
  }
});

// 메모리 모드는 기본 모드입니다. 다음과 같이 축약할 수 있습니다.
alovaInstance.GET('/todo/list', {
  //...
  localCache: 60 * 10 * 1000 // 10분
});

GET 요청은 기본적으로 메모리 캐시 시간을 300000ms(5분)로 설정하며 개발자는 설정을 사용자 정의할 수도 있습니다.

Cache placeholder mode

이 캐시 모드는 애플리케이션에 진입할 때마다 로딩 아이콘 대신 기존 데이터를 사용하고 싶을 때 사용하는 방식으로, 로딩보다 더 나은 경험을 가진 캐시 점유 모드(cache occupancy mode)를 사용할 수 있습니다.

캐시 점유 모드에서는 마지막 캐시의 이전 데이터가 data에 즉시 할당됩니다. 이전 데이터가 있는 경우 이를 사용하여 로딩 표시를 대체할 수 있습니다.
동시에 최신 데이터를 확보하고 캐시를 업데이트하여 실제 데이터를 신속하게 표시하고 최신 데이터를 확보할 수 있도록 요청합니다.

const todoListGetter = alovaInstance.Get('/todo/list', {
  //...
  localCache: {
    mode: 'placeholder',
    expire: 60 * 10 * 1000
  }
});

Restore mode

복원 모드에서는 서버측 캐시 데이터가 지속됩니다. 만료 시간에 도달하지 않으면 페이지 캐시를 새로 고쳐도 무효화되지 않습니다. 일반적으로 서버 측 관리가 필요한 일부 데이터에 사용되지만 기본적으로 변경되지는 않습니다. (e.g. 연간 공휴일의 특정 날짜)
다르긴 하지만 다시는 바뀌지 않을 겁니다. 이 시나리오에서는 캐시 만료 시간을 올해 마지막 순간으로 설정하기만 하면 됩니다.

const todoListGetter = alovaInstance.Get('/todo/list', {
  //...
  localCache: {
    mode: 'restore',
    expire: 60 * 10 * 1000
  }
});

⚠️ 요청 본문이 FormData, Blob, ArrayBuffer, URLSearchParams, ReadableStream과 같은 특수 데이터인 경우, 서버와 통신하려는 것으로 간주되어 데이터를 캐시하지 않습니다.

복원 모드에서 데이터가 변경되면 어떻게 해야 합니까?

복원 모드의 Method 인스턴스가 설정된 경우, 인터페이스 데이터 변경이나 프런트엔드 처리 응답 데이터의 로직 변경으로 인한 것일 수 있습니다. 이때 사용자가 애플리케이션을 게시(publishing)한 후, 변경된 데이터를 다시 캐시할 수 있도록 해야 합니다. 이때 tag 속성은 캐시 태그를 설정합니다. 영구 데이터의 각 부분에는 tag 식별자가 포함되어 있습니다. tag가 변경되면 원래 영구 데이터가 무효화되고, 새 데이터가 다시 획득되며, 새 tag가 식별에 사용됩니다.

const todoListGetter = alovaInstance.Get('/todo/list', {
  //...
  localCache: {
    mode: 'restore',
    expire: 60 * 10 * 1000,
    // tag 매개변수를 추가하거나 수정하면 캐시된 데이터가 유효하지 않게 됩니다.
    // 버전 번호 관리를 사용하는 것이 좋습니다.
    tag: 'v1'
  }
});

캐시 모드 전역 설정

[v1.3.0+] 위의 설정은 모두 Method에서 별도로 설정됩니다. 캐시 모드를 전역적으로 설정해야 하는 경우 다음과 같이 수행할 수 있습니다:

const alovaInstance = createAlova({
  //...
  localCache: {
    // POST의 캐시 모드를 균일하게 설정
    POST: {
      mode: 'placeholder',
      expire: 60 * 10 * 1000
    },
    // HEAD 요청의 캐시 모드를 균일하게 설정
    HEAD: 60 * 10 * 1000
  }
});

이후 alovaInstance 인스턴스에 의해 생성된 Method 인스턴스는 기본적으로 이 캐시 설정을 사용하며 Method 인스턴스에서도 재정의(overridden)될 수 있습니다.

⚠️ 캐시 모드가 전역적으로 설정되면 원래의 5분 GET 캐시 모드를 덮어쓰게 됩니다.

캐시 모드를 전역 비활성화

프로젝트에서 요청 캐시를 사용하지 않으려면 전역적으로 캐시를 해제할 수 있습니다.
일부 특정 요청에서만 사용하려는 경우, 전역적으로 해제하고 지정된 Method 인스턴스에서 설정할 수도 있습니다.

const alovaInstance = createAlova({
  //...
  // 모든 요청 캐싱을 전역적으로 비활성화하려면 null로 설정하세요.
  localCache: null
});

만료 시간 유형

만료 시간에는 상대 시간(relative time)과 절대 시간(absolute time)이라는 두 가지 유형이 있습니다.

상대 시간

캐시된 데이터가 저장될 때 만료되는 시간(밀리초)을 의미하며 위의 예는 모두 이러한 유형입니다.

localCache: 60 * 10 * 1000;

localCache: {
  expire: 60 * 10 * 1000,
}

절대 시간

특정 시점을 만료 시간으로 지정하면, 설정된 시점에 캐시가 만료됩니다.

localCache: new Date('2030-01-01');

localCache: {
  expire: new Date('2030-01-01');
}

Bora Im

이전 포스트