프런트엔드에서 데이터 캐싱

백엔드 HTTP 헤더를 사용하지 않고 백엔드로 전송된 요청을 효과적으로 캐시할 수 있는 방법에 대해 이야기하겠습니다.

상태 변경 간에 데이터를 조정하는 것은 어려울 수 있습니다. 표시할 게시물 목록을 가져오기 위해 백엔드로 요청을 보내는 애플리케이션을 고려하고 사용자가 게시물을 클릭하면 애플리케이션이 해당 게시물 데이터를 가져오기 위해 다른 요청을 보냅니다. 이제 백엔드가 매우 간단하여 해당 게시물에 대한 정확한 데이터를 얻을 수 있지만 다음 게시물과 이전 게시물의 제목을 표시하고 싶고 사용자 세션 중에 공유되는 일부 스폰서 데이터도 표시할 수 있습니다. 이러한 경우 백엔드에서 데이터를 다시 요청하는 것은 낭비이므로 이 시점에서 프런트엔드에는 몇 가지 옵션이 있습니다.

자바스크립트 상태 관리

프런트엔드는 재사용할 데이터를 추적할 수 있습니다. 해당 데이터를 전역 변수에 저장하거나 상태를 더 높은 수준으로 전달하거나 React Context과 같은 API를 사용합니다. 이러한 각 접근 방식에는 문제가 있으며 전역 변수는 기본적으로 사악합니다. 구성 요소 주위에 데이터를 전달하거나 API와 같은 컨텍스트에서 유지 관리하는 것은 요청 수가 증가함에 따라 지저분해질 수 있습니다.

상태 관리 프레임워크 사용

이것은 redux 과 같은 JavaScript 상태 관리 프레임워크의 매우 일반적인 사용 사례입니다. 복잡한 애플리케이션 데이터를 관리하는 방법을 제공합니다. 그러나 당신이 나와 같은 사람이라면 새로운 프레임워크를 도입하고 그 주위에서 코딩하는 방법을 배우는 오버헤드가 벅찬 작업이 될 수 있습니다. 이러한 프레임워크는 프런트엔드에 독단적인 디자인을 강요할 수 있으므로 프레임워크에 익숙하지 않은 사람에게는 큰 부담이 될 수 있습니다.

브라우저 저장소(실제 MVP)

우리는 최종 답인 브라우저 스토리지 API에 도달했습니다. 브라우저에서 관리하는 키 값 저장소입니다. 브라우저 저장소에는 로컬 및 세션의 두 가지 유형이 있습니다. 둘 다 비슷한 API를 제공하지만 로컬 저장소는 절대 지워지지 않지만 세션 저장소는 탭이 닫힌 후에 지워집니다. 이 접근 방식은 상태를 전달하는 기본 요소가 아니며 새로운 상태 관리 프레임워크를 학습하는 것처럼 복잡하지 않기 때문에 이전 접근 방식보다 훨씬 낫습니다.

브라우저 저장소 API에는 setItem 및 getItem의 두 가지 작업만 포함되며 예상할 수 있듯이 setItem는 지정된 키의 값을 저장하고 getItem는 값을 검색합니다. 우리는 상태를 직접 관리할 필요가 없으며 나중에 데이터를 저장하고 검색할 키와 값만 제공할 수 있습니다.

이 API의 사용 예는 URL에 대한 GET 요청을 호출하고 결과를 약속으로 반환하는 함수를 생성하여 보여줍니다.

// Without caching
function FetchData(url) {
  return fetch(url).then(res => res.text())
}

// With Caching
function FetchData(url) {
  let storageData = sessionStorage.getItem(url);
  if (storageData === null) {
    return fetch(url).then(res => res.text()).then(textData => {
      sessionStorage.setItem(url, textData)
      return textData
    })
  }
  return Promise.resolve(storageData);
}

제공된 URL을 키로 취급하고 가져온 데이터를 저장하므로 후속 요청이 캐시에서 이행됩니다. 이 접근 방식의 가장 좋은 점은 이해하기 쉽고 프런트엔드 코드를 방해하지 않는다는 것입니다. 이 경우 우리 문제에 대한 최상의 솔루션이기도 합니다.



캐싱은 성능과 사용자 경험을 최적화하는 가장 효과적인 기술 중 하나입니다. 프런트엔드에 요청 데이터를 저장하면 백엔드에 대한 불필요한 요청을 방지하여 저장된 내용을 빠르게 탐색하고 더 효과적으로 제어할 수 있습니다.

내 게시물이 마음에 들면 내blog를 확인하세요.