Nuxt3로 이사하기

우리는 최근에 nuxt2 composition-api의 환경에서 nuxt3로의 전환을 결정했다.
전격적으로 nuxt3를 도입하게 된 배경설명과 어떠한 모듈을 사용하고 있는지에 대한 내용을 다룬다.

우리는 지금까지 nuxt2의 options api에서 composition-api 그리고 nuxt3에 이르기까지 nuxt를 사용하면서 nuxt의 장단점을 nextjs와 비교해 보기도 하면서 개인적으론 nextjs 까지의 전환을 생각해보기도 했었다.

nextjs에 전환에 대한 주된 이유로는 역시 React에 대한 개발자풀을 무시할 수 없어서인데, 대부분 우리회사의 지원자를 보면 99.99퍼센트(사실은 지원자모두)가 전부 리액트 기반의 기술을 사용중이 었기 때문이다.

하지만 우리 프론트엔드팀은 nuxt-vue에 너무나 익숙해져 있었고 내 마음대로 react-nextjs 로 가자는 결정을 쉽게 할 순 없었다.

이러한 상황에서 nuxt-bridge-composition-api 환경에서 nuxt3로의 전환을 결정한 결정적인 이유는 다음과 같다.

1. Vite build 도입을 통한 빠른 빌드타임
사실 이부분이 상당히 매력적이었는데 nuxt-bridge도 부분적으로 Vite를 지원해주고 있지만 hot reload가 잘안되는등의 문제점도 nuxt3로 이전하는데 영향이 있었다.

2. 디자인프레임워크의 교체
기존 프로젝트는 대체적으로 Bootstrap-vue를 사용했었다. 일부 Vuetify를 쓰는곳도 있었지만 Bootstrap-vue는 컴포넌트의 디자인을 수정하는 것 도 수월하고 팀원들 대부분인 bootstrap에 익숙헤 사용해 왔지만 Vue3기반은 nuxt3에서는 동작하지 않은 아주 큰 문제가 있었다.
Vue3기반 bootstrap 프레임워크도 있었지만 내부적으로 Jquery를 사용하는데다가 ssr모드에서는 작동하지 않는등의 문제가 있어 과감히 nuxt3 에서 크게 문제없이 작동이 되는 ant-design 으로 디자인프레임워크를 교체했다.

3. Graphql
우리의 서버사이드에서는 기본적으로 Apollo Graphql을 사용한다. nuxt-apollo가 최근에 nuxt3용으로 나와서 아주 맘에 든다.
nuxt3의 useAsyncData, useLazyAsyncData를 wrapping한 api들을 제공하는데 nuxt3의 Suspense와 결합해서 사용하면 상당히 재밌을것 같다.

nuxt3에서 사용한 모듈

• @nuxtjs-alt/auth
• @nuxtjs-alt/axios
• @nuxtjs-alt/http
• @nuxtjs/apollo
• ant-design-vue