Nuxt 라이프사이클

Nuxt 애플리케이션의 라이프사이클을 이해하면, 특히 서버 사이드와 클라이언트 사이드 렌더링 모두에서 프레임워크가 어떻게 동작하는지 더 깊이 이해하는 데 도움이 됩니다.

이 장의 목표는 프레임워크의 다양한 부분, 그 실행 순서, 그리고 이들이 어떻게 함께 동작하는지에 대한 상위 수준의 개요를 제공하는 것입니다.

서버 라이프사이클

서버에서는 애플리케이션에 대한 모든 초기 요청마다 다음 단계가 실행됩니다:

서버 플러그인 once

Nuxt는 최신 서버 엔진인 Nitro로 구동됩니다.

Nitro가 시작되면 /server/plugins 디렉터리 아래의 플러그인들을 초기화하고 실행합니다. 이 플러그인들은 다음과 같은 작업을 할 수 있습니다:

애플리케이션 전역 오류를 포착하고 처리합니다.
Nitro가 종료될 때 실행되는 훅을 등록합니다.
응답을 수정하는 등의 요청 라이프사이클 이벤트에 대한 훅을 등록합니다.

Nitro 플러그인은 서버가 시작될 때 한 번만 실행됩니다. 서버리스 환경에서는 각 들어오는 요청마다 서버가 부팅되며, 이때마다 Nitro 플러그인도 함께 부팅됩니다. 그러나 이 플러그인들은 await 되지 않습니다.

Read more in Docs > 4 X > Directory Structure > Server#server Plugins.

서버 미들웨어

Nitro 서버를 초기화한 후, server/middleware/ 아래의 미들웨어가 모든 요청에 대해 실행됩니다. 미들웨어는 인증, 로깅 또는 요청 변환과 같은 작업에 사용할 수 있습니다.

미들웨어에서 값을 반환하면 요청이 종료되고 반환된 값이 응답으로 전송됩니다. 이 동작은 올바른 요청 처리를 위해 일반적으로 피해야 합니다!

Read more in Docs > 4 X > Directory Structure > Server#server Middleware.

앱 플러그인

먼저 Vue와 Nuxt 인스턴스가 생성됩니다. 그 후 Nuxt는 앱 플러그인을 실행합니다. 여기에는 다음이 포함됩니다:

Vue Router 및 unhead와 같은 내장 플러그인.
app/plugins/ 디렉터리에 위치한 커스텀 플러그인으로, 접미사가 없는 것(예: myPlugin.ts)과 .server 접미사가 있는 것(예: myServerPlugin.server.ts) 모두 포함됩니다.

플러그인은 특정 순서로 실행되며 서로 의존성을 가질 수 있습니다. 실행 순서와 병렬성 등 자세한 내용은 플러그인 문서를 참고하세요.

이 단계 이후 Nuxt는 추가 로직을 실행하는 데 사용할 수 있는 app:created 훅을 호출합니다.

Read more in Docs > 4 X > Directory Structure > App > Plugins.

라우트 검증

플러그인을 초기화한 후, 미들웨어를 실행하기 전에 Nuxt는 definePageMeta 함수에 validate 메서드가 정의되어 있다면 이를 호출합니다. 동기 또는 비동기로 동작할 수 있는 validate 메서드는 주로 동적 라우트 파라미터를 검증하는 데 사용됩니다.

파라미터가 유효하다면 validate 함수는 true를 반환해야 합니다.
검증에 실패하면 요청을 종료하기 위해 false 또는 statusCode 및/또는 statusMessage를 포함하는 객체를 반환해야 합니다.

자세한 내용은 라우트 검증 문서를 참고하세요.

Read more in Docs > 4 X > Getting Started > Routing#route Validation.

앱 미들웨어

미들웨어를 사용하면 특정 라우트로 이동하기 전에 코드를 실행할 수 있습니다. 이는 주로 인증, 리다이렉션 또는 로깅과 같은 작업에 사용됩니다.

Nuxt에는 세 가지 유형의 미들웨어가 있습니다:

전역 라우트 미들웨어
이름 있는 라우트 미들웨어
익명(또는 인라인) 라우트 미들웨어

Nuxt는 초기 페이지 로드 시(서버와 클라이언트 모두) 모든 전역 미들웨어를 실행한 다음, 모든 클라이언트 사이드 내비게이션 전에 다시 실행합니다. 이름 있는 미들웨어와 익명 미들웨어는 해당 페이지 컴포넌트에 정의된 페이지(라우트) 메타의 middleware 속성에 지정된 라우트에서만 실행됩니다.

각 유형에 대한 자세한 내용과 예시는 미들웨어 문서를 참고하세요.

서버에서 발생하는 모든 리다이렉션은 브라우저로 Location: 헤더를 전송하는 결과를 낳으며, 브라우저는 이 새 위치로 새 요청을 보냅니다. 이때 쿠키에 유지되지 않은 애플리케이션 상태는 모두 초기화됩니다.

Read more in Docs > 4 X > Directory Structure > App > Middleware.

페이지와 컴포넌트

이 단계에서 Nuxt는 페이지와 그 컴포넌트를 렌더링하고, useFetch 및 useAsyncData로 필요한 데이터를 가져옵니다. 서버에서는 동적 업데이트가 없고 DOM 작업도 발생하지 않기 때문에, onBeforeMount, onMounted 및 이후 훅과 같은 Vue 라이프사이클 훅은 SSR 동안 실행되지 않습니다.

기본적으로 Vue는 성능 향상을 위해 SSR 동안 의존성 추적을 일시 중지합니다.

서버 측에는 반응성이 없습니다. Vue SSR은 앱을 위에서 아래로 정적 HTML로 렌더링하므로, 이미 렌더링된 콘텐츠를 다시 돌아가 수정하는 것은 불가능합니다.

루트 범위의 <script setup> 안에서 정리(cleanup)가 필요한 부작용(side effect)을 발생시키는 코드는 피해야 합니다. 이러한 부작용의 예로는 setInterval로 타이머를 설정하는 것이 있습니다. 클라이언트 사이드 전용 코드에서는 타이머를 설정한 뒤 onBeforeUnmount 또는 onUnmounted에서 이를 해제할 수 있습니다. 그러나 SSR 동안에는 언마운트 훅이 절대 호출되지 않기 때문에, 타이머는 영원히 남아 있게 됩니다. 이를 피하려면 부작용 코드를 onMounted 안으로 옮기세요.

Daniel Roe가 서버 렌더링과 전역 상태를 설명하는 영상을 시청해 보세요.