useQuery의 isLoading이 SSR에서도 true가 될 수 있을까?

 

최근 동료분이 "SSR 페이지에서 미리 데이터를 받아오는 경우 useQuery 의 isLoading 이 true 인 경우가 있어요?" 라는 질문을 던졌는데, 이 질문에 대한 대답을 생각하다가 여러 의문이 생겨 글로 정리해본다.

 

용어 정리

- 서버사이드 : 웹서버의 서버 쪽 코드 실행

- 클라이언트사이드 : 웹서버의 클라이언트 쪽 코드 실행

- SSR : ServerSideRendering

- CSR : ClientSideRendering

- 서버 : api 를 제공하는 실제 서비스 서버

 

예시 코드: SSR + useQuery

나는 아래와 같은 코드를 주로 사용하고 있었다.

// Next.js 의 페이지 컴포넌트

export const getServerSideProps = async () => {
  const data = await fetchData();
  return { props: { dehydratedState: dehydrate(queryClient) } };
};

const Page = () => {
  const { data, isLoading } = useQuery(['key'], fetchData);

  if (isLoading) {
    return <Spin />;
  }

  return <div>{data}</div>;
};

 

getServerSideProps 내부 로직은 웹서버(서버사이드)에서 실행된다.

서버사이드에서 서버의 데이터를 미리 받아오고, dehydrate 를 통해 React Query 캐시에 넣어준다.

서버사이드에서 미리 데이터를 넣어주기 때문에, 클라이언트에서는 useQuery 의 반환값인 isLoading 이 항상 false 이다.

 

그렇다면 이 코드가 의미는 없었던걸까? 🤔

 

반면 CSR의 경우는?

CSR 페이지에서는 서버사이드에서 내려오는 데이터가 없기 때문에, useQuery는 클라이언트에서 처음으로 fetching 을 수행한다. 따라서 서버로부터 데이터를 불러오기 전에는 isLoading 값이 true 이다. 즉, isLoading 을 가지고 로딩 UI 를 보여주는 코드가 필요하다.

 

SSR 페이지 간 이동 시의 동작은?

같은 어플리케이션의 다른 페이지로 이동할 때, Next.js 에서는 보통 Next Link 나 Next Router를 사용해서 이동한다.

export const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about" prefetch={true}>
        Go to About
      </Link>
    </div>
  );
}

 

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export const Home = () => {
  const router = useRouter();

  useEffect(() => {
    router.prefetch('/about');
  }, [router]);

  const goToAbout = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  );
};

 

이 때, SSR 페이지로 이동 시 prefetch 동작이 Next 의 버전에 따라 다르다.

 

항목	Next.js 12 이하	Next.js 13
prefetch 동작	_next/data JSON 미리 받음	없음
클릭 시 응답 방식	클라이언트에서 hydrate	서버가 HTML을 렌더링

이전에는 SSR 페이지에 대한 Next Link 가 있다면, 미리 해당 페이지의 서버 사이드 로직을 실행하여 pageProps 받아두었다.

사담으로 이로 인해 이슈를 겪은 적도 있는데, 배포를 하면 이 pageProps를 받아오는 hash 값이 바뀌게 되어, 유저가 보고 있던 페이지의 Next LInk prefetch 가 모두 404 에러로그로 뜨는 경우가 있었다. 이 이슈를 마주한 후 "Next LInk 로 되어 있으면 서버 사이드에서 실행할 로직을 미리 실행해두는구나" 하고 생각하고 있었는데 Next 13 버전 이후에 이 동작이 바뀌었다. 

 

• 9버전 ~ 12버전 : SSR 페이지에 대한 Next Link 가 있다면, 서버 사이드 로직을 미리 실행하는 식으로 prefetch가 동작한다. 공식문서 공식문서2
• 13버전 : 기본적으로 prefetch 하지 않고, SSR 페이지로 이동 시 서버 사이드가 동작하여 HTML을 렌더링한다. 공식문서
  • prefetch 설정을 통해 켤 수 있다.
  • 개발모드에서는 prefetch 가 실행되지 않는다.

 

버전에 따라 prefetch 의 동작이 다를 수는 있지만, 어떤 방식으로든 SSR 페이지들은 항상 데이터를 불러온 상태이므로 isLoading 이 false 이다.

 

결론적으로 useQuery의 isLoading은?

상황	useQuery의 isLoading 값
SSR 진입 (getServerSideProps)	false
CSR 진입 (클라이언트 렌더링)	true
SSR 페이지 간 이동 (13버전 이후)	false

 

SSR에서는 항상 false 이고, CSR 에서는 true 이다. 따라서, SSR 로 구성된 페이지에서 서버사이드에서 불러오는 서버 데이터의 경우 isLoading 코드를 작성하지 않아도 된다.

 

생각해보면 당연한 사실이지만, 미처 의식하지 못했을 때는 관성적으로 isLoading에 대한 코드를 작성해왔던 것 같다.
이번에 동료의 질문을 계기로 useQuery와 SSR의 관계를 다시 들여다보면서, 자연스럽게 Next.js의 prefetch 동작 변화까지 살펴보게 되었다.