데이터 PreFethcing 적용하기

[Dolphin-PC]

• [x] 데이터 PreFethcing 적용하기

  • 상품 상세 조회에 데이터 prefetching을 적용하여 상세 페이지 데이터를 미리 받아오고, 첫 화면 렌더링 속도를 개선하는 과정은 다음과 같습니다:

    1. 네트워크 상태 확인:
       • Chrome 개발자 도구의 Network 탭을 열고, 상세 페이지에 접속하여 해당 상품에 대한 데이터 요청을 확인합니다.
       • 현재 상태에서는 상세 페이지에 접속할 때 해당 상품 데이터를 요청하는 것을 확인할 수 있습니다.

  • Prefetching 로직 작성:

    • 메인 페이지에서 사용자가 특정 상품 위에 마우스를 올리거나, '자세히 보기' 버튼 위에 마우스를 올릴 때, 해당 상품의 상세 데이터를 미리 불러오는 로직을 구현합니다.
    • 이를 위해 React Query의 prefetchQuery 함수를 사용합니다.
    • 예를 들어, 상품 카드나 '자세히 보기' 버튼에 onMouseEnter 이벤트를 추가하여, 이 이벤트가 발생할 때 prefetchQuery를 호출합니다.

  • Prefetching 구현 예시:

    • 다음은 React Query를 사용하여 데이터를 prefetch하는 함수의 예시입니다:

      javascriptCopy code
      import { useQueryClient } from 'react-query';
      
      const queryClient = useQueryClient();
      
      const prefetchProductData = (productId) => {
        queryClient.prefetchQuery(['product', productId], () =>
          fetchProductData(productId)
        );
      };
      

      • 이 함수는 상품 카드나 '자세히 보기' 버튼의 onMouseEnter 핸들러에서 호출될 수 있습니다.

  • 네트워크 상태 재확인:

    • prefetching 로직을 적용한 후, Chrome 개발자 도구의 Network 탭을 다시 확인합니다.
    • 이번에는 상세 페이지에 접속했을 때, 상품 상세 데이터에 대한 네트워크 요청이 발생하지 않는 것을 확인할 수 있습니다. 데이터가 미리 로드되어 있기 때문입니다.

• 이와 같은 prefetching 기법을 적용하면, 사용자가 상세 페이지로 이동할 때 데이터를 미리 불러와 빠른 화면 렌더링이 가능해져 사용자 경험이 크게 개선됩니다.

[Dolphin-PC]

prefetching 방법

1. queryClient.prefetchQuery
2. usePrefetchQuery

---

사용법

1. queryClient.prefetchQuery
   • queryClient를 사용하므로, 상솽에 따라 useEffect, if문 안에서 처리할 수 있다.
2. usePrefetchQuery
   • hooks문법으로 인해, 최상단에서만 사용할 수 있다. ==> 우리는 컴포넌트에 MouseEnter가 되었을 때, prefetch를 하고 싶으니 queryClient.prefetchQuery 방법 사용

[Dolphin-PC]

🤔 staleTime을 어떻게 해야 할까?

📌 배경

• staleTime을 지정하지 않았더니(default 0)
• MouseEnter가 될 때마다 & 상세페이지를 진입할 때, 네트워크 요청이 실행되는 것을 볼 수 있었다.
  • 이는 캐싱처리 없이, 매번 새로운 데이터를 불러오는 것으로 Prefetch의 의미가 없다.

---

• 이에 상품에 대한 데이터를 캐싱처리 하자니, 상품수량의 경우 자주 변하는 데이터이기에 캐싱처리를 하는 것은 잘못된 데이터를 보여주는 것이 된다.

방법 1. 상품 데이터 분리 (수량 데이터만 분리)

• 상품수량의 경우, 다른 유저의 구매Action에 의해 자주 변하는 데이터이다. 그렇기에, 이는 캐싱처리하면 안된다.
• 하지만, 상품제목, 설명, 가격의 경우 자주 변하는 데이터가 아니기에, 어느정도 캐싱처리를 해도 된다고 생각했다.
  • 이에 staleTime을 정하는 나름의 기준이 필요할 것 같다.

[Dolphin-PC]

🎉 해결

• 상품 데이터와 상품수량 데이터를 분리하여,
• 상품데이터 : staleTime : 5분으로 지정하여 이를 캐시데이터로 불러오는 것으로 처리했다.

---

PreFetch 직후

• 상품 상세 데이터["product","category",51] 데이터는 불러와졌지만 아직 mount되지 않아 inactive상태로 남아있다.

PreFetch한 상품상세 페이지 진입

• 상품 상세 데이터["product","category",51] 는 새로 불러오지 않았고,
• 상품 수량 데이터["product","quantity",51] 만 새로 불러왔다.

[Dolphin-PC]

📏 성능 측정

• 상품 조회 API에 2초 지연 설정

prefetch 적용 전

prefetch 적용 후

---

• 적용 전에는 페이지에 진입할 떄마다, 데이터를 불러왔기에 2초의 지연 로딩이 보였고,
• 적용 후에는 페이지 진입 전, 백그라운드에서 2초의 로딩 지연을 미리 하고 있었기에, 페이지에 진입하게 되면 미리 로드된 데이터를 바로 읽어올 수 있었다. 👍