NuxtPage 컴포넌트는 pages/ 디렉토리에 있는 페이지 컴포넌트를 화면에 표시하는 데 사용하는 컴포넌트입니다. Vue의 RouterView 컴포넌트의 래퍼 컴포넌트로, 좀 더 편리하고 기능이 추가된 버전으로 생각하면됩니다.
RouterView
Vue.js의 기본 라우터 컴포넌트입니다. 라우팅 설정에 기반해, 경로에 맞는 컴포넌트를 랜더링해줍니다.
NuxtPage
Nuxt.js 3에서의 페이지 컴포넌트로, 기본적으로 RouterView와 유사한 기능을 수행합니다. 하지만 NuxtPage는 Nuxt.js의 파일 기반 라우팅 시스템에 밀접하게 동작합니다. pages/ 디렉토리 하위의 경로에 기반해, 렌더링될 컴포넌트가 결정됩니다. 파일 기반 라우팅은 아래 글에서 정리 했었습니다.
https://velog.io/@fddsgt123/Nuxt-%ED%8C%8C%EC%9D%BC-%EA%B8%B0%EB%B0%98-%EB%9D%BC%EC%9A%B0%ED%8C%85
그 밖에도, NuxtPage는 Nuxt.js 레이아웃, 미들웨어와 자동으로 통합되는 장점이 있습니다.
재렌더링 시점의 차이
RouterView는
RouterView는 Vue Router에서 현재 URL 경로에 맞는 컴포넌트를 렌더링하는 컴포넌트라고 정리 했었습니다. RouterView는 URL 경로에 의해 컴포넌트가 결정되기 때문에, 동일한 컴포넌트가 계속 마운트되어 있는 상태에서 일부 라우트의 파라미터만 변경된 경우, RouterView는 기본적으로 컴포넌트를 다시 마운트하지 않고 기존 컴포넌트를 재사용하려고 합니다.
예시로, /user/1에서 /user/2로 라우트가 변경될 때, 기본적으로 RouterView는 user에 해당하는 컴포넌트를 마운트한 후 1, 2에 대한 변경으로는 user 컴포넌트를 리로드 하지 않습니다.
NuxtPage
NuxtPage는 파일 기반 라우팅을 통해 페이지 컴포넌트를 렌더링하는 데 사용되는 컴포넌트라고 정리 했습니다. 주목할 점은, NuxtPage는 경로가 변경될 때, 기본적으로 페이지를 다시 렌더링하는 동작을 합니다. 따라서 NuxtPage가 페이지 전환 시 새로운 데이터를 불러와야 하는 상황에서 유용합니다.
NuxtPage의 page-key 속성
NuxtPage 컴포넌트도 기본적으로는 쿼리 파라미터의 변경만으로는 리렌더링이 되지 않습니다. NuxtPage를 사용하면서, 파라미터 변경 시에도 리렌더링되게 하려면 어떻게 해야 할까요?
<NuxtPage :page-key="(route) => route.fullPath" />위와 같은 방식으로 NuxtPage를 사용하면 되는데, 원리에 대해 알아보겠습니다.
키 속성에 기반한 컴포넌트 재활용 규칙
Vue.js에서 key는 컴포넌트 또는 DOM 요소의 고유성을 식별하는 데 사용됩니다. Vue는 같은 컴포넌트에 대해 동일한 key가 있는 경우 해당 컴포넌트를 재사용하고, key가 달라지면 새로운 컴포넌트를 렌더링합니다.
따라서, NuxtPage의 :page-key 속성에 동적인 값을 전달하면, 그 값이 변경될 때마다 Nuxt는 해당 페이지를 새로 마운트하게 됩니다.
위의 예시에서는 key로써 fullPath를 전달했기 때문에 쿼리 파라미터가 변경될 때마다 key가 바뀌면서, 리렌더링이 되는 원리입니다.
주의할 점
NuxtPage가 Suspense로 페이지를 렌더링하는 방법에 문제가 발생할 수 있으므로 위 보기는 좋지 않다고 합니다.
Suspense 방식이란 컴포넌트가 비동기 작업을 수행할 때, 해당 작업이 완료될 때까지 렌더링을 지연시키거나 대체 콘텐츠를 보여주는 것을 의미합니다.
<template>
<Suspense>
<!-- 비동기 작업이 완료된 후 렌더링되는 컴포넌트 -->
<template #default>
<AsyncComponent />
</template>
<!-- 비동기 작업이 완료되기 전에 보여주는 로딩 상태 -->
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>위에서 설명한 :page-key="(route) => route.fullPath"를 사용하면 쿼리 파라미터 변경 시 페이지가 다시 마운트되어 새로운 컴포넌트로 렌더링됩니다. 이 과정에서 NuxtPage가 기본적으로 Suspense로 동작하기 때문에, 페이지가 다시 마운트될 때마다 비동기 데이터가 다시 로드되어, 해당 비동기 작업을 기다리기 위한 로딩 상태가 발생하게 됩니다.
