캐시 상태 관리만 해도 응답시간이 개선된다?!

혹시 실시간으로 많은 트래픽을 처리해야 하는 시스템에서 캐시 만료 문제로 인해 성능 저하를 경험한 적이 있나요? 그렇다면, 이 글에서 소개할 캐시 관리 전략이 해당 문제를 해결하는데 도움이 될 겁니다.

캐시 만료로 인한 실시간 서비스에서 발생하는 문제점

일반적으로 캐시를 사용하면 반복적이고 무겁게 처리되는 요청의 응답 시간을 크게 개선할 수 있습니다. 그러나 캐시가 주기적으로 만료되어 캐시 미스가 발생하는 경우, 만료된 데이터를 다시 불러오는 과정에서 응답 시간이 길어지는 문제가 발생할 수 있습니다.

도입 배경

제가 맡은 서비스 실시간 서비스에서도 위와 같은 문제로 캐시 만료 주기마다 응답시간이 크게 튀는 현상이 발생하였습니다.

초기에는 해결방안으로 별도의 컴포넌트를 도입하여 해당 컴포넌트에서 주기적으로 캐시를 업데이트 해주는 방식을 고려하였으나, DB 데이터 Soft/hard delete 방식으로 관리하는 것과 같이 캐시도 유사하게 관리하는 게 어떤가 하는 생각이 들었습니다.

그래서 위 문제를 해결할 수 있는 두 가지 방식 중, 시간과 비용을 아낄 수 있고 저희 서비스에 더 적합한 상태 관리를 통한 개선을 선택하여 구현하였습니다.

캐시 상태 개념

저는 캐시 상태를 FRESH, STALE, EXPIRED 세 가지 상태로 구분하고, 각 상태에 맞게 데이터를 처리하는 방식으로 구현하였습니다. 이러한 상태 관리 개념을 통해 캐시된 데이터가 만료되었더라도 일관된 응답 시간을 유지할 수 있습니다.
(이와 유사한 개념으로 HTTP Caching을 참조하였습니다. 참조)

• FRESH: 캐시된 데이터가 최신 상태이며, 그대로 사용할 수 있습니다.
• STALE: 캐시된 데이터가 오래되었지만, 사용이 가능합니다. 이 상태에서 요청을 받는 경우, 비동기적으로 데이터를 갱신을 트리거합니다.
• EXPIRED: 캐시된 데이터가 만료되어 사용할 수 없습니다. 이때는 새 데이터를 불러와서 갱신해야 합니다.

캐시 상태 관리 구현 방법

1. 캐시 상태 추가:
   우선, 캐시된 데이터의 상태를 관리하기 위해 CacheState 클래스를 추가합니다. 이 클래스는 캐시된 데이터의 상태와 최근 갱신 시간을 포함합니다.

    export enum CacheState {
      FRESH = 'fresh',
      STALE = 'stale',
      EXPIRED = 'expired',
    }
   
    export class CacheState {
      state: CacheState;
      cachedAt: Date;
   
      constructor() {
        this.state = CacheState.FRESH;
        this.cachedAt = new Date();
      }
    }
    ```
   

2. 캐시 갱신:
   캐시된 데이터가 오래될 경우, 이를 STALE 상태로 변경하고 갱신할 필요가 있음을 나타내며, 비동기적으로 데이터를 갱신합니다. 다음은 캐시 갱신 로직을 담은 부분입니다.

    async getCache(cacheArgs: CacheArgs): Promise<CachedData> {
      // 캐시 또는 캐시 상태가 존재하지 않는 경우, 캐시가 없다고 판단합니다.
      const stored = await this.cacheManager.get(cacheArgs.getCacheKey());
      if (!stored) return null;
      const state = await this.cacheManager.get(cacheArgs.getStateCacheKey());
      if (!state) return null;
   
   		// 캐시가 stale 상태인 지, 확인합니다.
      const isStale = this.updateCacheStateIfStale(state, cacheArgs);
      return { data: stored, isUpdateRequired: isStale };
    }
   
    updateCacheStateIfStale(state: CacheState, cacheArgs: CacheArgs): boolean {
      const cachedAt = new Date(state.cachedAt).getTime();
      const lifetime = (new Date().getTime() - cachedAt) / 1000;
      const isUpdateRequired = state.state === CacheState.FRESH && lifetime > this.softTTL;
   		
      // 캐시가 stale 상태가 되어야 하는 경우, state를 먼저 stale로 변경합니다.
      if (isUpdateRequired) {
        state.state = CacheState.STALE;
        this.cacheManager.set(cacheArgs.getStateCacheKey(), state, { ttl: this.hardTTL - Math.floor(lifetime) });
      }
   
      return isUpdateRequired;
    }
   

3. 캐시 비동기 갱신:
   만약 캐시된 데이터가 STALE 상태라면, 요청과 연관되지 않게 비동기적으로 데이터를 갱신합니다. 이렇게 하면 사용자에게는 STALE 데이터를 반환하면서도 백그라운드에서 최신 데이터를 준비할 수 있습니다.

   async getData(id: string, span?: Span): Promise<any> {
      const cacheArgs = new CacheArgs(id);
   	  // 캐시가 존재하는 지 확인합니다.
      const cache = await this.getCache(cacheArgs);
   	  
      if (cache) {
        const { data, isUpdateRequired } = cache;
   		// 바로 위 코드 예시에서 받은 응답으로 캐시가 업데이트가 필요한 경우,
   		// 비동기적으로 캐시를 업데이트 하도록 트리거하고, 기존 캐시 데이터를 반환합니다.
        if (isUpdateRequired) {
          this.fetchNewDataAsynchronously(id, cacheArgs);
        }
        return data;
      }
   
      return this.fetchNewData(id, cacheArgs);
    }
   
    fetchNewDataAsynchronously(id: string, cacheArgs: CacheArgs) {
      this.fetchNewData(id, cacheArgs).catch((e) => {
        console.error(`Failed to update cache: ${e}`);
      });
    }

캐시 상태 확인 및 사이드 이펙트 방지

마지막으로, async 함수를 호출하면서 반드시 await하지 않아도 되는 로직은 .catch()로 핸들링 하여, 비동기 동작 중 발생할 수 있는 사이드 이펙트를 방지합니다.

결론

이렇게 캐시 상태 관리를 도입함으로써, 만료된 데이터로 인한 응답 지연 문제를 해결할 수 있습니다. FRESH와 STALE 상태를 사용하여 데이터 갱신을 비동기적으로 처리함으로써 실시간 트래픽의 성능을 개선할 수 있습니다.

위 방식을 통해 저희 서비스의 응답시간은 P95 기준으로 기존의 22%(256 -> 57ms) 수준으로 개선되었으며, 주기적으로 발생하던 만료로 인한 응답시간 튐 현상도 해결하게 되었습니다.

캐시는 시스템 성능에 큰 영향을 미칠 수 있는 중요한 요소입니다. 이번 기회에 캐시 상태 개념을 적용해보세요. 분명 성능 향상을 체감하실 수 있을 겁니다.

여기까지 읽어주셔서 감사합니다!🥳