clientLoader

clientLoader: 클라이언트에서 데이터 로드하기

loader에 더해, 아니면 대신에, 클라이언트에서 실행될 clientLoader 함수를 정의할 수 있어요. 각 라우트는 렌더링 시 라우트에 데이터를 제공하는 clientLoader 함수를 정의할 수 있어요.

출처: Remix 공식 문서 — clientLoader

본문

export const clientLoader = async ({
  request,
  params,
  serverLoader,
}: ClientLoaderFunctionArgs) => {
  // call the server loader
  const serverData = await serverLoader();
  // And/or fetch data on the client
  const data = getDataFromClient();
  // Return the data to expose through useLoaderData()
  return data;
};

이 함수는 클라이언트에서만 실행되며 몇 가지 방식으로 사용할 수 있어요:

  • 순수 클라이언트 라우트를 위한 서버 loader 대신
  • clientLoader 캐시와 함께 사용해 뮤테이션 시 캐시를 무효화하기 위해
    • 서버 호출을 건너뛰는 클라이언트 사이드 캐시 유지
    • Remix BFF 홉을 우회해 클라이언트에서 API에 직접 접근
  • 서버에서 로드한 데이터를 더 보강하기 위해
    • 예: localStorage에서 사용자별 선호도 로드
  • React Router에서 마이그레이션을 원활하게 하기 위해

하이드레이션 동작

기본적으로 clientLoader는 초기 SSR 문서 요청에서 Remix 앱을 하이드레이션하는 동안 라우트에 대해 실행되지 않아요. 이는 clientLoader가 서버 loader 데이터의 모양을 바꾸지 않고, 이후 클라이언트 사이드 내비게이션에서의 최적화(캐시에서 읽거나 API에 직접 접근)일 뿐인 주요(그리고 더 단순한) 사용 사례를 위한 것이에요.

export async function loader() {
  // During SSR, we talk to the DB directly
  const data = getServerDataFromDb();
  return json(data);
}

export async function clientLoader() {
  // During client-side navigations, we hit our exposed API endpoints directly
  const data = await fetchDataFromApi();
  return data;
}

export default function Component() {
  const data = useLoaderData<typeof loader>();
  return <>...</>;
}

clientLoader.hydrate

초기 문서 요청에서 하이드레이션 동안 clientLoader를 실행해야 한다면 clientLoader.hydrate=true로 설정해 옵트인할 수 있어요. 그러면 Remix가 하이드레이션에서 clientLoader를 실행해야 한다고 인식해요. HydrateFallback이 없다면 라우트 컴포넌트가 서버 loader 데이터로 SSR되고, 그 다음 clientLoader가 실행되어 반환된 데이터가 하이드레이션된 라우트 컴포넌트에 제자리에서 갱신돼요.

라우트가 clientLoader를 내보내는데 서버 loader를 내보내지 않으면, SSR할 서버 데이터가 없으므로 clientLoader.hydrate가 자동으로 true로 취급돼요. 따라서 라우트 컴포넌트를 렌더링하기 전에 항상 하이드레이션에서 clientLoader를 실행해야 해요.

HydrateFallback

clientLoader에서 나와야 하는 데이터가 있어서 SSR 동안 기본 라우트 컴포넌트 렌더링을 피해야 한다면, 라우트에서 HydrateFallback 컴포넌트를 내보낼 수 있어요. 이 컴포넌트는 SSR 동안 렌더링되고, 하이드레이션에서 clientLoader가 실행된 후에만 라우터 컴포넌트가 렌더링돼요.

인자

params

이 함수는 loader와 같은 params 인자를 받아요.

request

이 함수는 loader와 같은 request 인자를 받아요.

serverLoader

serverLoader는 이 라우트의 서버 loader에서 데이터를 가져오는 비동기 함수예요. 클라이언트 사이드 내비게이션에서는 Remix 서버 loader로 fetch 호출을 해요. 하이드레이션에서 clientLoader를 실행하도록 옵트인했다면, 이 함수는 이미 서버에서 로드된 데이터를 (Promise.resolve를 통해) 반환해요.

더 알아보기