API
플러그인
plugin-preload

@stackflow/plugin-preload

@stackflow/plugin-preload는 외부 데이터를 미리 불러올 수 있도록 하는 플러그인이에요.

설치

npm install @stackflow/plugin-preload

사용법

stackflow.ts
import { stackflow } from "@stackflow/react";
import { preloadPlugin } from "@stackflow/plugin-preload";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
import { NotFoundPage } from "./NotFoundPage";
 
const { Stack, useFlow, activities } = stackflow({
  activities: {
    MyHome,
    MyArticle,
    NotFoundPage,
  },
  plugins: [
    // ...
    preloadPlugin({
      loaders: {
        MyHome({ activityParams }) {
          // implement your own preload function using activity information
          // when activity pushed, loader is automatically triggered before rendering
        },
        MyArticle() {
          // ...
        },
        NotFoundPage() {
          // ...
        },
      },
    }),
  ],
});
 
export type TypeActivities = typeof activities;
usePreloader.ts
import { createPreloader } from "@stackflow/plugin-preload";
import type { TypeActivities } from "./stackflow";
 
export const { usePreloader } = createPreloader<TypeActivities>();
MyComponent.tsx
import { usePreloader } from "./usePreloader";
 
const MyComponent = () => {
  const { preload } = usePreloader();
 
  useEffect(() => {
    // 명시적으로 데이터를 미리 불러와요
    preload("MyArticle", {
      /* ... */
    });
  }, []);
 
  return <div>{/* ... */}</div>;
};

레퍼런스

preloadPlugin

OptionTypeDescription
loaders{ [key]: Loader }액티비티 이름과 해당 로더 함수의 매핑으로, 액티비티의 데이터나 리소스를 어떻게 사전 로딩할지를 정의해요.

usePreloader

OptionTypeDescription
urlPatternOptionsUrlPatternOptions사전 로딩 함수 내에서 URL 패턴 매칭을 커스터마이즈하는 옵션이에요.