[Vue] Nuxt fetch의 서버 사이드 호출이 안되는 건에 대하여

오랜만에 vue 프로젝트를 관리 할 일이 생겼는데, nuxt를 사용해 서버를 돌리고 있어 최근 nuxt를 조금 보고 있는 상태이다.

조금 특이한 구조로 되어있어서 (vue를 사용하는데 SPA 기능을 1도 활용하고 있지 않다.) 분석을 열심히 하는 중인데, 대부분의 호출 함수가 asyncData() 로 이루어져 있고, 이 때문에 코드를 수정할 때마다 hot reloading이 되면서 데이터를 불러오지 못하는 오류가 발생하고 있다(...).

개발자 입장에서 불편하기도 하고, 구조를 조금 개선할 수 있지 않을까 싶어 작은 것 부터 해보자는 마음으로 진행하려 했다.

asyncData는 only server side 이고 처음 페이지(브라우저)가 생성되는 시점에만 호출되는 반면, fetch의 경우 페이지 load 케이스에 따라 server side와 client side 모두 사용이 가능하다 하여 테스트를 하려고 했는데 도저히 fetch가 server side에서 실행이 되지가 않아서 헤메는 중이다.

이런 과정과 시도와.. 얻게 된 정보들을 기록하고자 글을 작성한다. 아마 시도는 몇 없을 것 같고 왜 안 되는가에 대한 이유를 밝히는게 주가 되지 않을까 싶다.

1. SSR mode가 켜져있는 지 확인한다.

nuxt 초기 세팅에서 ssr을 설정했는지 알 수 없지만, 아마 asyncData는 정상적으로 동작하니 켜져있을거라 예상하면서도 nuxt.config.js 파일에 ssr 설정 또는 mode 설정을 찾아보았다. ssr 옵션은 없으나 mode: 'univalsal' 이 잘 등록 되어 있는 것이 보인다.

module.exports = {
	mode: 'univalsal'
}

 이렇게.. (module.exports ={} 는 구조에 따라 export default {} 로 대체될 수 있다.)

2. page component인지 확인한다.

구 버전인지는 모르지만 asyncData나 fetch의 ssr은 page-component에서만 동작한다는 말이 있다. 2.12 버전 이후로는 instance에서도 활용이 가능하다던 것 같기도 한데, 확실한 정보인지는 확신이 없기 때문에 page-component에 fetch 함수를 넣고 테스트 해보았다.

asyncData는 page-level component에서만 호출이 가능하지만, fetch의 경우 모든 vue component에서 사용이 가능하다고 공식 문서에 기술되어 있기 때문에 이 부분은 제외한다. 사실, page-level에서는 되는지 테스트도 해봤는데, 여전히 어림도 없었다.

공식문서 링크: https://nuxtjs.org/announcements/understanding-how-fetch-works-in-nuxt-2-12/

3. 하늘에 기도한다.

왜 안되는지 다른 문서를 봐도 똑같은 얘기 도리뱅뱅이라 내가 뭘 해야 할 지 모르겠다. 왜 안되는지 기도를 좀 해본다.

아무래도 server side에서 실행이 안 돼서 테스트 용 nuxt 프로젝트 생성 후 첫 페이지에 찍어보니 server side에서 콘솔이 찍힌다. 어떡하지.. 혹시 몰라서 폴더 만들어서 다른 페이지에서 호출했는데도 찍힌다.. 어떡하지....

또 혹시 몰라서 컴포넌트 생성해서 컴포넌트 파일 내에서 fetch를 실행해도 server side에 콘솔이 잘 찍힌다. 어떡하지 ㅠ ㅠㅠㅠ