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

안녕하세요 선생님
상세페이지에서 홈으로 이동할때 로딩화면에 관련해서
Link태그의 prefetching 질문있습니다.

아래와 같이 suspense를 적용했을때
app/(afterLoging)/home/page.tsx

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 TabDeciderSuspense from '@/app/(afterLogin)/home//_component/TabDeciderSuspense';
import { Suspense } from 'react';
import Loading from './loading';
import { auth } from '@/auth';

export default async function Home() {
  const session = await auth();
  return (
    <main className={style.main}>
      <TabProvider>
        <Tab />
        <PostForm me={session} />
        {/* suspense는 서버컴포넌트여야만 한다. */}
        {/* suspense는 부모컴포넌트여야지 자식(아래)있는 컴포넌트 감지할 수 있다. */}
        <Suspense fallback={<Loading />}>
          <TabDeciderSuspense />
        </Suspense>
      </TabProvider>
    </main>
  );
}

next.js 문서를 보면
link태그가 있는 경우, 화면에 들어왔을때
static한 부분은 prefetch하고, 데이터 호출이 필요한 경우는 loading.tsx까지 호출해준다고 되어있더라구요.

그래서 제가 기대한 것은 상세페이지에서, 홈의 Link태그가 화면에 들어오기 대문에, 홈으로 이동했을때
첫번째 이미지가 아닌, 두번째 이미지처럼 로딩이 되어야할 것 같은데 첫번째 이미지 처럼 되더라구요.
(이동한것도 30초 이내였습니다)

혹시 제가 잘못이해한건지 알려주시면 감사합니다.

유저 상세페이지에서 홈으로 이동할때



suspense적용후 새로고침하거나 팔로우중 클릭시