Next.js VS Nuxt.js

안녕하세요 Lovefield입니다.

이번 글은 Next.js(React.js)와 Nuxt.js(Vue.js)를 비교하는 글입니다. 두 가지 프레임워크는 각각 React.js와 Vue.js를 SSR(Server Side Rendering)로 작업하기 위해 만들어졌습니다. 저는 개인적으로 Nuxt.js를 선호하며, 이유는 React.js는 플러그인이다 보니 프레임워크인 Vue.js보다 비정형적이었습니다. 그리고 하나의 사이트를 플러그인으로 만든다는 사실이 저에겐 이해가 가지 않았습니다. 그럼에도 불구하고 전세계가 React.js에 열광하고 있습니다.

개인적으로 이해가 많이 안 가기도 하고, 두 가지 도구를 비교해 보기 위해 이번 글을 작성해 봅니다.비교는 Next.js:13.3.4와 Nuxt.js:3.4.3로 했습니다.

1. 폴더구조

- Next.js

Next.js의 경우 src, app, pages를 제외하면 이렇다 할 폴더구조가 존재하지 않습니다. 다른 사람들은 Next.js 폴더구조를 어떻게 사용하고 있는지 조사를 해보았지만 이렇다 할 규정된 사항이 없었습니다. 다들 프로젝트 입맛대로, 처음 생성한 생성자의 습관대로 구성되어 있더군요. 결국 Next.js에서 제공하는 src, app, page를 제외한 모든 폴더 구조는 각기 다르게 사용하고 있었습니다.

- Nuxt.js

Nuxt.js의 경우 프레임워크로써 거의 모든 폴더 구조가 정해져 있습니다. 공식 문서에 표기된 사항처럼 폴더구조를 사용하며, 사용자가 추가로 폴더를 생성하거나 경로를 변경하여 사용할 수 있습니다.

2. 레이아웃

개인적인 경험으로 비춰보았을 때 한국에서 단일 레이아웃을 사용한 적은 없는 것 같습니다. 항상 두 가지 이상의 레이아웃을 사용했습니다.

- Next.js

Next.js의 경우app폴더를 사용했을 경우와pages폴더를 사용했을 경우의 설정이 다릅니다.app폴더의 경우layout.tsx와같이 레이아웃 파일이 필수로 지정되어 있어야 합니다.pages폴더를 사용한 경우 필수적인 파일은 아니지만 레이아웃 파일을 생성하면 적용이 됩니다. 두 가지 이상의 레이아웃을 사용하기 위해서는 복잡한 방식이 사용됩니다. app폴더를 사용하는경우()폴더를 사용해 구분하거나, 하위 폴더에 중첩레이아웃을 사용하는 방법밖에 없습니다.pages폴더를 사용하는 경우는 공식 문서와 같이 코드를 작성해야 합니다.

- Nuxt.js

Nuxt.js의 경우layouts폴더를 이용합니다.default.vue를 생성하면 모든 페이지는 기본적으로 레이아웃을default.vue파일 설정에 따릅니다. 만약 다른 레이아웃을 사용 하고자 하면layouts폴더에 새로운 파일을 생성합니다. 예시로single.vue라는 파일을 생성했다고 가정해 봅시다. 그렇다면 페이지에서 다음과 같은 코드를 작성하면 됩니다.

<template></template>

<script setup lang="ts">
definePageMeta({
   layout: "single",
});
</script>

3. Auto import

사실 Auto import는 Next.js에 없는 기능입니다. Next.js에서는 페이지에서 50개의 컴포넌트를 사용한다고 가정한다면 전부 import를 해야 합니다. Nuxt.js에서는 자동으로 관련 폴더를 로드하므로 import 문이 사용될 일이 없습니다. 그 외에 사용자가 지정한 폴더를 Auto import 할 수 있어 개발하면서 import 문을 거의 사용하지 않습니다.

이 항목을 굳이 비교하는 이유는 Typescript 때문입니다. Typescript를 사용하면 공용으로 사용하는 많은 타입들을 써야 합니다. 이러한 타입들은 온전히 import 문으로 들어와 코드의 양을 늘려주죠. 개인적으로 사용해야 하는 모든 것들에 대해서 import 문을 작성해 코드의 양을 늘려주는 것이 달갑지는 않았습니다.

4. Server side logic

최근 프론트 개발은 서버에서 동작하는 로직을 만들 상황이 늘어나고 있습니다. 쿠키 관리만 하더라도, httpOnly 옵션을 많이 사용하는 만큼 클라이언트에서 쿠키를 제어하지 못하도록 설정하는 편입니다.

- Next.js 의 경우 LifeCycle이 혼란스러웠습니다. Next.js에서 Data fetch 항목을 보면 서버에서 동작하는 기능입니다. 그 상황에서 useState나 useEffect를 사용하려고 하면 클라이언트에서만 사용 가능하다는 로그가 뜹니다. 물론 pages 구조를 사용했다면 getStaticProps를 사용할 수 있습니다. app 폴더를 사용한 경우는 아직 어떻게 처리해야 하는지 이해하지 못했습니다.

-Nuxt.js의 경우 LifeCycle이 단순합니다. 서버에서부터 실행되는 순서가 하나씩 정해져 있습니다. 약 8가지 정도 있는 이 순서를 단순하게 이야기하자면, 서버 로직 - 미들웨어 - 패치(렌더링 직전) - 마운팅 같이 서버에서부터 클라이언트까지의 과정이 담겨있습니다.

제가 Server side logic을 이야기하는 이유는 기본적으로 처음 페이지에 들어올 때는 서버를 호출하기 때문입니다. 그 이후는 페이지 이동 방식에 따라 클라이언트 요청이 있을 수도 있지만 로직 상 서버에서 특정 기능을 돌려야 하는 경우가 많습니다. 이 부분은 아직 제가 Next.js의 서버 로직에 대해 깊게 이해하지 못해서 비교라고 할 수 있을지 모르겠습니다.

5. 인기

인기는 Next.js가 압도적입니다. 기본적으로 React.js의 인기가 높다 보니 당연한 일이죠. 세계적으로 React.js와 Vue.js는 7대3 정도의 인기를 가지고 있습니다. 채용이나 커뮤니티 측면을 고려한다면 Next.js를 고르는 것은 현명한 선택이라고 생각됩니다. 하지만 유지 보수와 관리 측면에서는 Nuxt.js가 훨씬 좋은 선택이라고 생각됩니다.