[NextJS] Context and Helpers

 

NuxtJS - Context (출처 : https://nuxtjs.org)

 

 Context 개체는 asyncData , 플러그인 , 미들웨어 및 nuxtServerInit와 같은 특정 Nuxt 기능에서 사용할 수 있습니다.  Context는 애플리케이션에게 현재 요청에 대한 추가 정보와 선택적 정보를 종종 제공합니다.

 

 무엇보다도 Context는 Nuxt 애플리케이션의 다른 부분에 대한 액세스를 제공하는데 사용됩니다. (예: Vuex 저장소 또는 기본 연결 인스턴스) 따라서 항상 사용이 가능한 저장소와 서버에서 사용 가능한 Context에 req 및 res 개체를 가지고 있습니다. 그러나 시간이 지남에 따라, Context는 다른 많은 유용한 변수와 shotcuts로 확장되었습니다. 이제 개발 모드에서는 HMR(Hot Module Reload/Replacement) 기능, 현재 라우트, 페이지 매개변수 및 쿼리에 액세스 할 수 있을 뿐만 아니라 Context를 통해 환경 변수에 액세스 할 수 있는 옵션이 제공됩니다. 또한 모듈 기능과 helpers는 Context를 통해 노출되어 클라이언트와 서버 측 모두에서 사용할 수 있습니다.

 

기본적으로 존재하는 모든 Context keys는

function (context) { // Could be asyncData, nuxtServerInit, ...
  // Always available
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context

  // Only available on the Server-side
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }

  // Only available on the Client-side
  if (process.client) {
    const { from, nuxtState } = context
  }
}

※ 여기에서 참조하는 Context는 Vuex Actions에서 사용할 수 있는 Context 객체 또는 nuxt.config.js의 build.extend 함수에서 사용할 수 있는 Context 객체와 혼동되어서는 안 됩니다. 이들은 서로 관련이 없습니다!

 

API 쿼리에 페이지 매개변수 사용

 Context는 context.params를 통해 라우트의 가능한 동적 매개변수를 직접 노출합니다. 다음 예에서는 URL의 일부로 동적 페이지 매개변수를 사용하여 nuxt/http 모듈을 통해 API를 호출합니다. nuxt/http 모듈과 같은 모듈은 context.app 개체를 통해 사용할 수 있는 고유한 기능을 노출할 수 있습니다.

 

 또한 잠재적 오류를 처리하기 위해 API 호출을 try/catch 문으로 래핑합니다. context.error 함수를 사용하면 Nuxt의 오류 페이지를 직접 표시하고 발생한 오류를 전달할 수 있습니다.

 

export default {
  async asyncData(context) {
    const id = context.params.id
    try {
      // Using the nuxtjs/http module here exposed via context.app
      const post = await context.app.$http.$get(
        'https://api.nuxtjs.dev/posts/${id}''
      )
      return { post }
    } catch (e) {
      context.error(e) // Show the nuxt error page with the thrown error
    }
  }
}

 

 ES6에서는 이 구문을 사용하여 Context 객체를 구조화할 수 있습니다. 액세스하려는 개체를 전달한 다음 Context라는 단어를 사용하지 않고 코드에서 사용할 수 있습니다.

 

export default {
  async asyncData({ params, $http, error }) {
    const id = params.id

    try {
      // Using the nuxtjs/http module here exposed via context.app
      const post = await $http.$get('https://api.nuxtjs.dev/posts/${id}'')
      return { post }
    } catch (e) {
      error(e) // Show the nuxt error page with the thrown error
    }
  }
}

 

사용자 리디렉션 및 저장소 액세스

 저장소 디렉토리를 통해 설정한 경우, Context를 통해 Vuex 저장소에 액세스 하는 것도 가능합니다. Vue 구성 요소에서 this.$store로 처리할 수 있는 저장소 개체를 제공합니다. 또한 Context를 통해 노출된 helper인 리디렉션 메서드를 사용하여 인증된 상태가 falsy 인 경우 사용자를 리디렉션 합니다.

 

export default {
  middleware({ store, redirect }) {
    // retrieving keys via object destructuring
    const isAuthenticated = store.state.authenticated
    if (!isAuthenticated) {
      return redirect('/login')
    }
  }
}

 

 

Helpers

 Context의 바로 가기 외에도 Nuxt 애플리케이션에는 다른 Helper들이 있습니다.

 

$nuxt: The Nuxt helper

 $nuxt는 사용자 경험을 개선하고 상황에 따라 escape hatch로 설계된 helper입니다. Vue 구성 요소의 this.$nuxt와 클라이언트 측의 window.$nuxt를 통해 액세스 할 수 있습니다.

 

<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <Nuxt />
  </div>
</template>

 

Connection checker

 $nuxt helper는 사용자의 인터넷 연결이 있는지 여부를 빠르게 확인할 수 있는 방법을 제공합니다. isOffline 및 isOnline 부울 값을 노출합니다. 이를 사용하여 사용자가 오프라인이 되는 즉시 메시지를 표시할 수 있습니다.

 

<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <Nuxt />
  </div>
</template>

 

루트 인스턴스에 액세스

 DX/UX(개발자 경험/사용자 경험) 기능을 제공하는 것 외에도 $nuxt helper는 다른 모든 구성 요소에서 응용 프로그램의 루트 인스턴스에 대한 바로 가기도 제공합니다. 또한 window.$nuxt를 통해 $nuxt helper에 액세스할 수 있습니다. 이 helper는 Vue 구성 요소 외부에서 $axios와 같은 모듈 메서드에 액세스할 수 있는 escape hatch로 사용할 수 있습니다. 이것은 현명하게 그리고 최후의 수단으로만 사용해야 합니다.

 

페이지 데이터 새로고침

 사용자의 현재 페이지를 새로 고치고 싶을 때 페이지를 완전히 새로고침 하고 싶지는 않을 것입니다. 서버에 다시 접속하여 최소한 전체 Nuxt 애플리케이션을 다시 초기화할 수 있기 때문입니다. 대신 asyncData 또는 fetch에서 제공하는 데이터만 새로 고치고 싶은 경우가 많습니다.

 

 this.$nuxt.refresh()를 사용하여 그렇게 할 수 있습니다!

 

<template>
  <div>
    <div>{{ content }}</div>
    <button @click="refresh">Refresh</button>
  </div>
</template>

<script>
  export default {
    asyncData() {
      return { content: 'Created at: ' + new Date() }
    },
    methods: {
      refresh() {
        this.$nuxt.refresh()
      }
    }
  }
</script>

 

로딩 바 제어

 $nuxt를 사용하면 this.$nuxt.$loading을 통해 프로그래밍 방식으로 Nuxt의 로드 막대를 제어할 수도 있습니다.

 

export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

 

onNuxtReady helper

 Nuxt 애플리케이션이 로드되어 준비된 후 일부 스크립트를 실행하려면 window.onNuxtReady 함수를 사용할 수 있습니다. 이는 사이트의 상호 작용 시간을 늘리지 않고 클라이언트 측에서 기능을 실행하려는 경우에 유용할 수 있습니다.

 

window.onNuxtReady(() => {
  console.log('Nuxt is ready and mounted')
})

 

Process helpers

 Nuxt는 세 가지 부울 값(클라이언트, 서버 및 정적)을 전역 프로세스 개체에 주입하여 앱이 서버에서 렌더링 되었는지 아니면 완전히 클라이언트에서 렌더링되었는지 확인하고 정적 사이트 생성을 확인하는 데 도움이 됩니다. 이러한 helper는 애플리케이션 전체에서 사용할 수 있으며 일반적으로 asyncData 사용자 영역 코드에서 사용됩니다.

 

<template>
  <h1>I am rendered on the {{ renderedOn }} side</h1>
</template>

<script>
  export default {
    asyncData() {
      return { renderedOn: process.client ? 'client' : 'server' }
    }
  }
</script>

 

 예에서 renderedOn은 서버 측 렌더링을 사용할 때 '서버'로 평가되며 사용자가 페이지에 직접 액세스 합니다. 사용자가 애플리케이션의 다른 부분에서 페이지로 이동할 때(예: <NuxtLink>를 클릭) 클라이언트로 평가됩니다.

 

출처 : https://nuxtjs.org/docs/concepts/context-helpers

Context and Helpers