인프런 커뮤니티 질문&답변

안녕하세요. 강사님

예제를 보고 하던 중 suspense 가 동작하지 않아 질문드립니다.

처음 예시로 알려주신 react-query의 isPending 을 사용한 로딩처리는 잘 동작하지만 마지막에 알려주신 useSuspense(useSuspenseInfiniteQuery, useSuspenseQuery)들을 사용하는 경우 동작하지 않네요..

*팔로우 중 을 선택해도 suspense에 설정한 로딩 컴포넌트가 나오지 않고 딜레이된 시간(5초) 후 데이터가 보여집니다.

로딩 컴포넌트도 회전하지 않고 멈춰있습니다.

어떤부분을 봐야할까요?ㅠㅠ

반대로 이런 증상을 경험하니 이전 데이터가 먼저 보여진 후 5초 뒤에 최신 데이터로 보여지므로 사용자가 잘 못된 데이터를 표시 할 수 있다는걸 배울 수 있었습니다.😎

소스코드

const HomePage = async () => {
  return (
    <HomeContextProvider>
      <HomeTopTab />
      <WriteForm />
      <Suspense fallback={<Loader />}>
        <TabDividerSuspense />
      </Suspense>
    </HomeContextProvider>
  );
};

const TabDividerSuspense = async () => {
  const queryClient = new QueryClient();
  await queryClient.prefetchInfiniteQuery({
    queryKey: ["tweet", "recommends"],
    queryFn: getPostRecommends,
    initialPageParam: 0,
  });
  const dehydratedState = dehydrate(queryClient);
  return (
    <HydrationBoundary state={dehydratedState}>
      <TabDivider />
    </HydrationBoundary>
  );
};

const TabDivider = () => {
  const { tab } = useContext(HomeContext);
  return tab === "recommended" ? <TweetList /> : <FollowingList />;
};

const TweetList = () => {
  const { ref, inView } = useInView();

  const { data, fetchNextPage, hasNextPage, isFetching, isPending } =
    useSuspenseInfiniteQuery<
      Post[],
      object,
      InfiniteData<Post[]>,
      [string, string],
      number
    >({
      queryKey: ["tweet", "recommends"],
      queryFn: getPostRecommends,
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage.at(-1)?.postId,
    });

  useEffect(() => {
    if (inView) {
      !isFetching && hasNextPage && fetchNextPage();
    }
  }, [fetchNextPage, hasNextPage, inView, isFetching]);

  const tweets = useMemo(() => {
    if (data) {
      return data.pages.flat();
    }
  }, [data]);

  return (
    <>
      {tweets?.map((tweet) => (
        <Tweet post={tweet} key={tweet.postId} />
      ))}
      {isPending && <Loader />}
      <div ref={ref} />
    </>
  );
};

추가 질문

빌드 후 네트워크 탭에서 home을 확인해보면 post 글 들이 모두 html로 변환되어 내려 오고 있습니다!

(dev에서는 템플릿?으로 표현되더라고요)

저는 html이 아닌 데이터 형태로 내려와 useQuery로 해당 키로 접근해서 그냥 데이터를 가져올 줄 알았는데..그게 아닌가보네요.

혹시 좀 더 자세히 설명 좀 부탁드려도 될까요?ㅠ

그리고 home의 미리보기 탭에서는 post글들이 아닌 로딩 컴포넌트가 보입니다. (위의 사진에 응답 탭에서는 post글 들이 존재하고요)

로딩 컴포넌트가 보이는 이유는 하이드레이션이 처리되기 전이라 그런게 맞나요?

지금 자료를 다시 찾으려니 못 찾고 있는데.. suspense를 사용할 경우 완성된 화면이 아닌 로딩화면을 먼저 내려주므로 seo에는 나쁠 수 있다라는 글을 본적이 있던 것 같은데..맞을까요?

*SEO 관련해서 추가로 궁금한건 강의가 따로 있다고 영상에서 말씀하셔서 거기까지 보고 필요할 경우 질문 한번 더 드리겠습니다.👍