로더 구성

대부분의 예제에서는 로더를 페이지 컴포넌트와 같은 파일에 정의하지만, 별도 파일에 정의한 뒤 페이지 컴포넌트에서 import할 수도 있습니다. 이 유연성 덕분에 코드베이스 구성뿐 아니라 청크가 어떻게 분할되는지 까지 제어할 수 있습니다.

하나의 로더가 여러 페이지에서 사용된다면, 한 페이지에서 export하고 다른 페이지에서 import하는 대신 별도 파일로 추출하는 편이 더 나을 수 있습니다. 이를 import하는 페이지는 보통 로더를 가져오기 위해 전체 페이지 컴포넌트 청크를 로드하게 되기 때문입니다.

loaders/issues.ts

import { defineBasicLoader } from 'vue-router/experimental'
import { getIssuesByProjectId } from '@/api'

export const useProjectIssues = defineBasicLoader('/[projectId]/issues', to =>
  getIssuesByProjectId(to.params.projectId)
)

pages/[projectId]/issues.vue

<script lang="ts">
import { useProjectIssues } from '@/loaders/issues'
export { useProjectIssues }
</script>

<script setup lang="ts">
const { data: issues } = useProjectIssues()
</script>

pages/[projectId]/insights.vue

<script lang="ts">
import { useProjectIssues } from '@/loaders/issues'
import { useProjectPullRequests } from '@/loaders/pull-requests'
export { useProjectIssues, useProjectPullRequests }
</script>

<script setup lang="ts">
const { data: issues } = useProjectIssues()
const { data: pullRequests } = useProjectPullRequests()
</script>

위 예제에서는 useProjectIssues 로더를 별도 파일에 정의하고 pages/[projectId]/issues.vue와 pages/[projectId]/insights.vue라는 두 개의 서로 다른 페이지에서 import합니다. 두 페이지는 같은 데이터를 사용하지만 다른 방식으로 보여 주므로 issues를 위해 서로 다른 로더를 둘 만들 이유가 없습니다. 로더를 별도 파일로 추출하면 최적의 청크 분할을 보장할 수 있습니다.

이 패턴을 사용할 때는 해당 로더를 사용하는 모든 페이지 컴포넌트에서 로더를 export 해야 한다는 점을 기억하세요. 그래야 라우터가 페이지를 렌더링하기 전에 로더를 await할 수 있습니다.

페이지 컴포넌트 밖에서 사용하기

지금까지는 로더를 페이지 컴포넌트에서만 사용하는 경우를 봤습니다. 하지만 로더를 사용하는 장점 중 하나는 일반적인 composable처럼 애플리케이션의 여러 부분에서 재사용할 수 있다는 점입니다. 이렇게 하면 코드 중복을 줄일 뿐 아니라 요청을 중복 제거하고 데이터를 공유하여 최적이면서 성능 좋은 데이터 가져오기를 보장할 수 있습니다.

페이지 컴포넌트 밖에서 로더를 사용하려면 단순히 import 해서 다른 composable처럼 사용하면 되며, export할 필요는 없습니다.

<script setup lang="ts">
// 페이지 컴포넌트에서 직접 import할 수도 있습니다
import { useProjectIssues } from '@/pages/[projectId]/issues.vue'

const { data: issues } = useProjectIssues()
</script>

TIP

페이지가 아닌 컴포넌트에서 로더를 사용할 때는, 해당 로더가 사용되는 페이지 컴포넌트에서 로더를 export 해야 합니다. 일반 컴포넌트에서 로더를 import해 사용하는 것만으로는 라우터가 이를 인식하지 못하며, 내비게이션 중에 트리거하거나 await하지도 않습니다.

중첩 라우트

중첩 라우트를 정의할 때는 부모와 자식 컴포넌트 양쪽에서 모두 로더를 export해야 하는지 걱정할 필요가 없습니다. 이 부분은 자동으로 최적화되며 로더는 부모와 자식 컴포넌트 사이에서 공유됩니다. 이 때문에 데이터 로더가 사용되는 페이지 컴포넌트에서는 항상 데이터 로더를 export하는 편이 더 단순합니다.