목적

callOnce 함수는 다음의 경우에 주어진 함수나 코드 블록을 한 번만 실행하도록 설계되었습니다:

• 서버 사이드 렌더링 중이지만 하이드레이션은 아님
• 클라이언트 사이드 내비게이션

이것은 이벤트 로깅이나 글로벌 상태 설정과 같이 한 번만 실행되어야 하는 코드에 유용합니다.

사용법

callOnce의 기본 모드는 코드를 한 번만 실행하는 것입니다. 예를 들어, 서버에서 코드가 실행되면 클라이언트에서는 다시 실행되지 않습니다. 또한 클라이언트에서 이 페이지로 다시 이동하여 callOnce를 여러 번 호출하더라도 다시 실행되지 않습니다.

const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('This will only be logged once')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})

초기 서버/클라이언트 이중 로드를 피하면서도 모든 내비게이션에서 실행할 수도 있습니다. 이를 위해 navigation 모드를 사용할 수 있습니다:

const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('This will only be logged once and then on every client side navigation')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
}, { mode: 'navigation' })

타입

callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
callOnce(fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>

type CallOnceOptions = {
  /**
   * callOnce 함수의 실행 모드
   * @default 'render'
   */
  mode?: 'navigation' | 'render'
}

매개변수

• key: 코드가 한 번만 실행되도록 보장하는 고유 키입니다. 키를 제공하지 않으면, callOnce 인스턴스의 파일 및 줄 번호에 고유한 키가 생성됩니다.
• fn: 한 번 실행할 함수입니다. 비동기일 수 있습니다.
• options: 모드를 설정하여 내비게이션 시 재실행(navigation)하거나 앱의 수명 동안 한 번만 실행(render)하도록 합니다. 기본값은 render입니다.
  • render: 초기 렌더링 중 한 번 실행(SSR 또는 CSR) - 기본 모드
  • navigation: 초기 렌더링 중 한 번 및 이후 클라이언트 사이드 내비게이션마다 한 번 실행