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

안녕하세요 제로초님

제목처럼
api호출 3초뒤로 하고, loading.tsx 파일이 있을 때 없을때 /home/page.tsx

이런식으로 테스트를 해봤습니다.

/home/page.tsx에서는 react-query로 ssr을 적용했고

import style from './home.module.scss'
import Tab from "@/app/(afterLogin)/home/_component/Tab";
import TabProvider from "@/app/(afterLogin)/home/_component/TabProvider";
import PostForm from "@/app/(afterLogin)/home/_component/PostForm";
import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query';
import TabDecider from "@/app/(afterLogin)/home/_component/TabDecider";
import { getPostRecommends } from '@/app/(afterLogin)/_lib/getPostRecommends';

export default async function Home() {
  const queryClient = new QueryClient();
  await queryClient.prefetchInfiniteQuery({
    queryKey: ['posts', 'recommends'],
    queryFn: getPostRecommends,
    initialPageParam: 0,
  });
  const dehydratedState = dehydrate(queryClient);

  return (
    <main className={style.main}>
      <HydrationBoundary state={dehydratedState}>
        <TabProvider>
          <Tab />
          <PostForm />
          <TabDecider />
        </TabProvider>
      </HydrationBoundary>
    </main>
  );
}

/mocks/handlers.tsx에서는 postRecommends를 가져오되 3초 delay를 줬습니다.

http.get('/api/postRecommends', async ({ request }) => {
    console.log('----------------------------------handlers /api/postRecommends');
    await delay(3000);
    const url = new URL(request.url);
    const cursor = parseInt(url.searchParams.get('cursor') as string) || 0;
    return HttpResponse.json(
      [
        {
          postId: cursor + 1,
          User: User[0],
          content: `${cursor + 1} ${faker.lorem.paragraph()}`,
          Images: [{ imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) }],
          createdAt: generateDate(),
        },
        {
          postId: cursor + 2,
          User: User[0],
          content: `${cursor + 2} ${faker.lorem.paragraph()}`,
          Images: [
            { imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) },
            { imageId: 2, link: faker.image.urlLoremFlickr({ category: 'animals' }) },
          ],
          createdAt: generateDate(),
        },
        {
          postId: cursor + 3,
          User: User[0],
          content: `${cursor + 3} ${faker.lorem.paragraph()}`,
          Images: [],
          createdAt: generateDate(),
        },
        {
          postId: cursor + 4,
          User: User[0],
          content: `${cursor + 4} ${faker.lorem.paragraph()}`,
          Images: [
            { imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) },
            { imageId: 2, link: faker.image.urlLoremFlickr({ category: 'animals' }) },
            { imageId: 3, link: faker.image.urlLoremFlickr({ category: 'animals' }) },
            { imageId: 4, link: faker.image.urlLoremFlickr({ category: 'animals' }) },
          ],
          createdAt: generateDate(),
        },
        {
          postId: cursor + 5,
          User: User[0],
          content: `${cursor + 5} ${faker.lorem.paragraph()}`,
          Images: [
            { imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) },
            { imageId: 2, link: faker.image.urlLoremFlickr({ category: 'animals' }) },
            { imageId: 3, link: faker.image.urlLoremFlickr({ category: 'animals' }) },
          ],
          createdAt: generateDate(),
        },
      ]
    );
  }),

이 후에 ssr화면 테스트를 위해서

브라우저의 자바스크립트 사용중지 했습니다.

서버도 각각 재시작하고 테스트했습니다.

그리고 나서 테스트한 화면입니다.

아래 화면은 loading.tsx가 업을때,

아래 화면은 loading.tsx가 있을때 입니다.

선생님 강의에서

ssr을 적용했을때 loading화면을 포기해야한다고 이해했었습니다.

prefetchInfiniteQuqery를 쓰고 loading을 포기하거나,

prefetchInfiniteQuqery을 포기하고 loading을 사용하거나.

그런데 제가 테스트했을때는 ssr이라도 로딩 화면이 보이는걸로 봐서 제가 테스트를 잘못한건지,

loading.tsx가 있는것 자체가 suspense를 사용한것과 동일한 효과를 주어서 보여지게 되는건지

여쭙고 싶습니다.

제가 잘못테스트했다면 어떻게 테스트를 해야 좀 더 정확히 구분지을 수있을지도 궁금합니다.