앱 라우터의 캐싱

앱 라우터는 웹 애플리케이션의 성능 향상을 위해 3가지의 캐싱 방법을 지원합니다.

Request Memoization
Data Cache
Full Route Cache

Request Memoization

요청 메모이제이션(Request Memoization)은 여러 컴포넌트에서 발생한 중복된 fetch 요청을 줄여주는 캐싱 방법입니다. 예를 들어, 아래와 같은 코드가 있다고 합시다.

components/CartList.jsx
async function fetchCart() {
  const response = await fetch(`http://localhost:4000/carts`);
  const cart = await response.json();
  return cart;
}

async function CartList() {
  const carts = await fetchCart();

  return <div>{carts.map(cart => (<p>{cart}</p>))}</div>
}

components/CartTotal.jsx
async function fetchCart() {
  const response = await fetch(`http://localhost:4000/carts`);
  const cart = await response.json();
  return cart;
}

async function CartTotal() {
  const items = await fetchCart();

  return <div>{items.length}</div>
}

CartList, CartTotal 컴포넌트에서 모두 카트 목록을 받아오는 /carts API를 호출하고 있습니다. 이 2개의 컴포넌트를 화면에 동시에 그릴 때 궁극적으로 API 요청은 한번만 발생됩니다. Next 내부적으로 동일한 GET 요청에 대해서는 아래와 같이 캐싱하기 때문이죠.

deduplicated-fetch-requests

이렇게 요청을 캐싱하는 이유는 기존에 최상단 컴포넌트에서 받은 데이터를 프롭스로 여러 번 하위 컴포넌트에 내려야 했기 때문입니다. 프롭스 드릴링(Props Drilling)을 더이상 하지 않아도 되는 장점이 생기죠.

tip

참고로, GET 요청에 대해서만 캐싱이 동작합니다. 그리고 같은 URL로 요청을 하더라도 요청 옵션이 다른 경우에는 캐싱이 되지 않습니다. 예를 들어, 아래 2개의 요청은 요청 옵션이 다르기 때문에 다른 요청으로 간주되어 캐싱되지 않습니다.

fetch(`http://localhost:4000/carts`);
fetch(`http://localhost:4000/carts`, { headers: { a: 'b' }});

앱 라우터의 캐싱

Request Memoization​

Request Memoization