개발 히스토리

일단 위의 Lifecycle를 이해 해야 함

여기서 asyncData는 큰 문제가 되지 않음

데이터를 SSR에서 가져온 뒤 처리 하기 때문에 괜찮지만 개발을 진행 하면서 계속 걸리는 문제는 항상 fetch임

최초 페이지가 열릴 경우에는 정상 동작 하지만 브라우저에서 새로 고침을 할 경우에는 문제가 생김

이는 데이터가 분명 다 불러 왔다고 했으나 CSR 쪽으로 반영이 안됨

결국 최종적으로는 fetchOnServer을 false 처리 하여 동작하는 것을 확인함

왜 정상 접근시와 새로고침시가 다르게 동작하는지 정확하게 파악 안됨 (2022-09-28 기준)

개발을 막 진행한 상황이고 일정이 있기에 우선적으로 넘어 가나, 추 후에는 다시 테스트를 해보고 다시 기록을 진행 해야 겠음

그 이외 데이터 관련 기록을 남김

fetch()와 fetch(context)의 차이

  fetch()는 this 사용가능, fetch(context)를 사용할 경우 nuxt 개체는 사용이 가능하나, this는 사용 불가

activated

  현재 fetchState의 timestamp와 query를 체크 하여 데이터를 다시 갱신할 지 말지를 결정 할 수 있음

  query의 경우에는 현재와 기존의 값을 받을 수 있도록 처리 하면 유용할듯

  일전에 현재와 기존의 값을 받을 수 있도록 한 것이 있던걸 봤는데...다시 찾으면 기록 할 예정

NuxtJS의 NuxtJS/Axios 사용하지 않고 사용 하는 방법.

추가 기록 - (2022-09-28)

  토큰 처리 할 경우 가능하면 쿠키에 토큰 저장 후 쿠키에서 뽑아 쓰는것을 추천 함

  쿠키는 cookie-universal-nuxt 사용

  아래 코드에 추가 했으며, 기본적으로 plugin으로 작성 되었을 때의 기준이며, nuxt context가 있어야 함

1. 플러그인 사용 안함

2. axios interceper 작성 및 코드 작성

import axios from 'axios'

const api = axios.create({})

api.interceptors.request.use(function (config) {
  // 2022-09-28 추가
  const token = context.app.$cookies.get('token')
  // config.headers = {
  //   'Authorization': AuthenticationStore.state.token ? 'Bearer ' + AuthenticationStore.state.token : ''
  // }
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

export default api

3. 서버 사이드 proxy 설정

끝

asyncData와 fetch 차이

두가지 공통점은 서버사이드에서의 데이터 처리

asyncData는 페이지 컴포넌트 데이터와 병합됨

fetch는 페이지 컴포넌트가 랜더링되기 이전에 정제된 데이터를 store에 넣기 위해 사용

asyncData의 리턴값은 데이터 객체

fetch의 리턴값은 Promist

Nuxt Axios Plusin으로 Intercepter 설정이 가능함.