리액트 prefetch 테스트 : prefetchInfiniteQuery 적용하기

 

Prefetching & Router Integration | TanStack Query Docs

 

🎃 개선 사항 : 게시물 보기 > 관리자 게시물, 유저 카테고리별 데이터 가져오기

=> 깜빡거림 + 페이지 로드시 느림

1) 해당 페이지가 로드되면 관리자 게시물 + 유저 "전체 보기" 데이터 가져오기

2) 카데고리 클릭 시 그때마다 카테고리마다의 데이터 가져오기

 

😀 prefetch를 선택한 이유

1) 사용자경험을 개선하기 위함

2) 기존 코드를 수정하지 않아도 된다는 점

3) 기존 useInfiniteQuery로 데이터 조회를 구현 ➡️ prefetchInfiniteQuery 사용 가능

 

🖥️구현 코드(1)

//NavBar.tsx
import { NavLink, useNavigate } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
import { getAdminPostList } from '../../api/pageListApi';
import { DocumentData, QueryDocumentSnapshot } from 'firebase/firestore';
import { QUERY_KEYS } from '../../query/keys';

function NavBar() {

  // hover 시 prefetch 함수
  const queryClient = useQueryClient();
  const handleHover = async () => {
    queryClient.prefetchInfiniteQuery({
      queryKey: [QUERY_KEYS.ADMIN],
      queryFn: getAdminPostList,
      initialPageParam: undefined as undefined | QueryDocumentSnapshot<DocumentData, DocumentData>,
      staleTime: 60000
    });
  };

  return (
          <NavLink to="/viewAll" style={styledNav} onMouseEnter={handleHover}>
            게시물 보기
          </NavLink>
  );
}

export default NavBar;

▶ NavBar에 [게시물보기] 마우스 호버시 handleHover 비동기함수 실행

▶ 기존에 데이터를 useInfiniteQuery를 사용해서 가져오기에 prefetchInfiniteQuery를 사용함

▶ initialPageParam은 파이어베이스에 데이터 가져오는 타입을 참고

 

 

▶ NavBar에서는 관리자 게시물만 미리 가져옴

 

▶ 해당 화면인 [게시물보기]에 로드되는 순간 useEffect에서 카테고리별 데이터를 prefetch함

 

🖥️구현 코드(2) : 개선할 필요가 있어보임

  //prefetch
  const queryClient = useQueryClient(); // queryClient 사용
  const handleHover = async () => {
    const queriesToPrefetch = [
      { queryKey: QUERY_KEYS.KNOWHOW, queryFn: getCategoryPosts('knowHow') },
      { queryKey: QUERY_KEYS.RECOMMEND, queryFn: getCategoryPosts('recommendation') },
      { queryKey: QUERY_KEYS.SHARE, queryFn: getCategoryPosts('sharing') },
      { queryKey: QUERY_KEYS.HABIT, queryFn: getCategoryPosts('habit') },
      { queryKey: QUERY_KEYS.TOTAL, queryFn: getCategoryPosts('total') },
      { queryKey: QUERY_KEYS.NOCATEGORY, queryFn: getCategoryPosts('noCategory') }

      // 다른 queryKey와 queryFn을 추가할 수 있습니다.
    ];

    for (const { queryKey, queryFn } of queriesToPrefetch) {
      await queryClient.prefetchInfiniteQuery({
        queryKey: [queryKey],
        queryFn: queryFn,
        initialPageParam: undefined as undefined | QueryDocumentSnapshot<DocumentData, DocumentData>,
        staleTime: 60000
      });
    }
  };

  //초기 마운트 실행시
  useEffect(() => {
    if (searchParams.get('category') === null || searchParams.get('sort') === null) {
      updateSortOption(category, sortBy);
    }
    handleHover();
  }, []);

▶ 초기 마운트 실행시 데이터를 prefetch하기 위해서 useEffect 안에 handleHover 함수를 작성

▶ 카테고리가 6가지여서 미리 데이터를 prefetch하고 싶었음 

 

 

---

1. 첫번째 측정 (변경 전 기존 코드)

[왼쪽] 홈 화면 / [오른쪽] 게시물 보기

 

2. 두번째 측정 (변경 후) : 관리자 + 유저 게시물 prefetch적용

[왼쪽] 홈 화면 / [오른쪽] 게시물 보기

내가 직접적으로 수정한 곳은 [오른쪽] 게시물보기!

22점에서 65점으로 개선되었다😀👍

 

그럼에도, 1시간 뒤에 측정할 때는 65점이 아닌 더 낮은 점수가 나와서 알아보니

현재 개발서버여서 확실한 데이터를 얻기는 어려울 것 같다.

배포 후에 다시 측정해봐야 할 것 같음!

 

 

[코드 변경 사항]

⭐관리자 게시물 : NavBar에서 [게시물 보기] 마우스 Hover시 데이터 prefetch

⭐사용자 게시물 : [게시물 보기] 화면 들어와서 데이터 prefetch

⭐화면 min-height 설정 ➡️ Layout Shifts  문제 해결

⭐사진 사이즈 : 줄이기 (이건 크게 변화가 없어서 다른 방법으로 찾아봐야겠다)

---

(1) 문제 개선 : Layout Shifts 

⭐ Layout Shifts  => 대안 : min-height 또는 스켈레톤 UI (우선 min-height 적용)

=> Wrapper 하는 DIV에  min-height를 적용해서 해결했음.

  

 

(2) 문제 개선 : 사진 크기 및 paint 문제

⭐Webp로 변환해도 크게 변동사항은 없었음

 

JPG WEBP 변환 (온라인 무료) — Convertio

 

끝.