Loader API

액티비티로 이동하기 전에 데이터를 미리 불러와 초기 렌더링 시간을 단축할 수 있어요. Stackflow의 빌트인 Loader API를 사용하면 깔끔하게 구현할 수 있어요.

로더 정의하기

stackflow.config.ts에서 액티비티에 로더를 정의해요. 로더는 액티비티가 렌더링되기 전에 실행되고, 그 데이터는 useLoaderData()로 가져올 수 있어요.

HomeActivity.loader.ts

import type { ActivityLoaderArgs } from "@stackflow/config";
 
export async function homeActivityLoader({ params }: ActivityLoaderArgs<"HomeActivity">) {
  const data = await fetchData(params);
  return { data };
}

stackflow.config.ts

import { defineConfig } from "@stackflow/config";
import { homeActivityLoader } from "./HomeActivity.loader";
 
export const config = defineConfig({
  activities: [
    {
      name: "HomeActivity",
      route: "/",
      loader: homeActivityLoader,
    },
  ],
  transitionDuration: 350,
});

액티비티 컴포넌트 내에서 로더 데이터에 접근해요.

HomeActivity.tsx

import { useLoaderData, type ActivityComponentType } from "@stackflow/react";
import type { homeActivityLoader } from "./HomeActivity.loader";
 
const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
  const loaderData = useLoaderData<typeof homeActivityLoader>();
 
  return (
    <div>{/* loaderData 활용 */}</div>
  );
};

API 파이프라이닝

고급 사용 사례에서는 React 앱 초기화와 병렬로 API 요청을 시작해 로딩 시간을 더욱 단축할 수 있어요. 자세한 내용은 API 파이프라이닝 가이드를 참고해요.

히스토리와 동기화하기 구조화된 액티비티