이 장의 목표는 프레임워크의 다양한 부분, 실행 순서, 그리고 이들이 어떻게 함께 작동하는지를 고수준에서 개괄적으로 설명하는 것입니다.

서버

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

단계 1: Nitro 서버 및 Nitro 플러그인 설정 (한 번만)

Nuxt는 현대적인 서버 엔진인 Nitro에 의해 구동됩니다.

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

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

단계 2: Nitro 서버 미들웨어

Nitro 서버를 초기화한 후, server/middleware/ 아래의 미들웨어가 각 요청마다 실행됩니다. 미들웨어는 인증, 로깅, 요청 변환 등의 작업에 사용될 수 있습니다.

단계 3: Nuxt 초기화 및 Nuxt 앱 플러그인 실행

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

• Vue Router 및 unhead와 같은 내장 플러그인.
• plugins/ 디렉토리에 위치한 커스텀 플러그인, 접미사가 없는 것들(예: myPlugin.ts)과 .server 접미사가 있는 것들(예: myServerPlugin.server.ts).

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

단계 4: 라우트 검증

플러그인을 초기화한 후 미들웨어를 실행하기 전에, Nuxt는 definePageMeta 함수에 정의된 경우 validate 메서드를 호출합니다. validate 메서드는 동기적이거나 비동기적일 수 있으며, 동적 라우트 매개변수를 검증하는 데 자주 사용됩니다.

• 매개변수가 유효한 경우 validate 함수는 true를 반환해야 합니다.
• 검증이 실패하면 요청을 종료하기 위해 false 또는 statusCode 및/또는 statusMessage를 포함하는 객체를 반환해야 합니다.

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

단계 5: Nuxt 앱 미들웨어 실행

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

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

• 전역 라우트 미들웨어
• 명명된 라우트 미들웨어
• 익명(또는 인라인) 라우트 미들웨어

Nuxt는 애플리케이션에 처음 진입할 때와 라우트 탐색 전에 전역 미들웨어를 자동으로 실행합니다. 명명된 및 익명 미들웨어는 해당 페이지 컴포넌트에 정의된 페이지(라우트) 메타의 미들웨어 속성에 지정된 라우트에서만 실행됩니다.

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

서버에서의 모든 리다이렉션은 브라우저에 Location: 헤더를 전송하여 브라우저가 이 새로운 위치로 새 요청을 하게 됩니다. 이 경우 애플리케이션 상태는 쿠키에 저장되지 않는 한 리셋됩니다.

단계 6: 페이지 및 컴포넌트 렌더링

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

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

단계 7: HTML 출력 생성

필요한 모든 데이터를 가져오고 컴포넌트를 렌더링한 후, Nuxt는 렌더링된 컴포넌트와 unhead의 설정을 결합하여 완전한 HTML 문서를 생성합니다. 이 HTML은 관련 데이터와 함께 클라이언트로 전송되어 SSR 프로세스를 완료합니다.

클라이언트 (브라우저)

이 라이프사이클의 이 부분은 선택한 Nuxt 모드에 상관없이 브라우저에서 완전히 실행됩니다.

단계 1: Nuxt 초기화 및 Nuxt 앱 플러그인 실행

이 단계는 서버 사이드 실행과 유사하며, 내장 및 커스텀 플러그인을 포함합니다.

plugins/ 디렉토리에 있는 커스텀 플러그인, 접미사가 없는 것들(예: myPlugin.ts)과 .client 접미사가 있는 것들(예: myClientPlugin.client.ts)은 클라이언트 사이드에서 실행됩니다.

단계 2: 라우트 검증

이 단계는 서버 사이드 실행과 동일하며, definePageMeta 함수에 정의된 경우 validate 메서드를 포함합니다.

단계 3: Nuxt 앱 미들웨어 실행

Nuxt 미들웨어는 서버와 클라이언트 모두에서 실행됩니다. 특정 환경에서 코드를 실행하려면 클라이언트용 import.meta.client와 서버용 import.meta.server를 사용하여 분할하는 것을 고려하세요.

단계 4: Vue 애플리케이션 마운트 및 하이드레이션

app.mount('#__nuxt')를 호출하여 Vue 애플리케이션을 DOM에 마운트합니다. 애플리케이션이 SSR 또는 SSG 모드를 사용하는 경우, Vue는 클라이언트 사이드 애플리케이션을 인터랙티브하게 만들기 위해 하이드레이션 단계를 수행합니다. 하이드레이션 동안 Vue는 애플리케이션을 재생성하고(서버 컴포넌트 제외), 각 컴포넌트를 해당 DOM 노드에 매칭시키고 DOM 이벤트 리스너를 연결합니다.

적절한 하이드레이션을 보장하기 위해 서버와 클라이언트의 데이터 일관성을 유지하는 것이 중요합니다. API 요청의 경우, useAsyncData, useFetch 또는 다른 SSR 친화적인 컴포저블을 사용하는 것이 좋습니다. 이러한 방법은 서버 사이드에서 가져온 데이터를 하이드레이션 동안 재사용하여 반복된 요청을 피하고, 하이드레이션 오류를 방지합니다. 새로운 요청은 하이드레이션 후에만 트리거되어야 합니다.

단계 5: Vue 라이프사이클

서버와 달리, 브라우저는 전체 Vue 라이프사이클을 실행합니다.