Nuxt.js 작동: Vue.js 서버 측 렌더링 프레임워크

Nuxt.js 프로젝트 생성

먼저 Node.js와 Yarn 또는 npm이 설치되어 있는지 확인하세요. 그런 다음 명령줄을 통해 새 Nuxt.js 프로젝트를 만듭니다.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

생성 과정에서 UI 프레임워크, 전처리기 등의 옵션이 필요한지 여부를 선택하고 필요에 따라 구성할 수 있습니다.

디렉토리 구조

Nuxt.js는 특정 디렉토리 구조를 따르며, 주요 디렉토리 중 일부는 다음과 같습니다:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

• .nuxt/: 이 디렉터리는 자동으로 생성되며 컴파일된 코드를 포함합니다. 일반적으로 직접 수정할 필요는 없습니다.
• 자산/: CSS, JavaScript, 이미지 등 컴파일되지 않은 정적 리소스를 저장합니다. Nuxt.js는 빌드 중에 이러한 리소스를 처리합니다.
• Components/: 애플리케이션의 다른 부분에서 재사용할 수 있는 사용자 정의 Vue 구성 요소를 저장합니다.
• 레이아웃/: 페이지의 레이아웃을 정의합니다. 기본 레이아웃이 있을 수도 있고 특정 레이아웃이 여러 개 있을 수도 있습니다.
• 페이지/: 각 파일은 경로에 해당하며 파일 이름은 경로 이름입니다. 동적 경로는 대괄호 []로 표시됩니다.
• middleware/: 페이지 렌더링 전후에 로직을 실행할 수 있는 사용자 정의 미들웨어를 배치합니다.
• 플러그인/: Vue.js 플러그인을 위한 사용자 정의 항목 파일입니다.
• static/: 아무런 처리 없이 빌드 출력 디렉터리에 직접 복사되며, robots.txt 또는 favicon.ico 등을 저장하는 데 자주 사용됩니다.
• store/: Vuex 상태 관리 디렉토리, 액션, 변이, getter 및 전체 스토어의 항목 파일을 저장합니다.
• nuxt.config.js: 프로젝트 설정을 사용자 정의하는 데 사용되는 Nuxt.js 구성 파일입니다.
• package.json: 프로젝트 종속성 및 스크립트 구성.
• Yarn.lock 또는 npm.lock: 프로젝트 종속성의 정확한 버전을 기록하여 다양한 환경에서 종속성 일관성을 보장합니다.

페이지 렌더링

pages/ 디렉터리에 index.vue 파일을 만듭니다. 애플리케이션 홈페이지는 다음과 같습니다.

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

Nuxt.js 페이지 렌더링 프로세스는 서버 측 렌더링(SSR)과 클라이언트 측 렌더링(CSR)의 두 가지 주요 단계로 나뉩니다. Nuxt.js 페이지 렌더링의 세부 단계는 다음과 같습니다.

초기화:

사용자가 브라우저에 URL을 입력하고 서버에 요청을 보냅니다.

서버가 요청을 받은 후 처리를 시작합니다.

경로 해결:

Nuxt.js는 nuxt.config.js의 경로 구성(존재하는 경우)을 사용하거나 자동으로 페이지/ 디렉터리에서 경로를 생성합니다.

pages/index.vue 또는 Pages/about.vue 등 해당 페이지 파일이 식별됩니다.

데이터 미리 가져오기:

Nuxt.js는 페이지 구성 요소에서 asyncData 또는 fetch 메소드를 찾습니다(존재하는 경우).

이러한 메소드는 API 또는 기타 데이터 소스에서 데이터를 가져오기 위해 서버 측에서 실행됩니다.

데이터를 얻은 후에는 직렬화되어 페이지 템플릿에 삽입됩니다.

템플릿 렌더링:

Nuxt.js는 Vue.js의 렌더링 엔진을 사용하여 구성 요소와 미리 가져온 데이터를 HTML 문자열로 변환합니다.
HTML 문자열에는 <script> JSON 형식의 태그입니다.</script>

HTML 반환:

서버는 생성된 HTML 응답을 클라이언트(브라우저)로 다시 보냅니다.

클라이언트 초기화:

브라우저는 HTML을 수신한 후 인라인 JavaScript를 구문 분석하고 실행하기 시작합니다.
Nuxt.js 클라이언트 라이브러리(nuxt.js)가 로드되고 초기화됩니다.

클라이언트 렌더링:

클라이언트 라이브러리가 렌더링을 담당하고 Vue.js 인스턴스가 생성되며 데이터가 인라인 JSON에서 Vue 인스턴스로 주입됩니다.
페이지가 초기 렌더링을 완료하고 사용자는 전체 페이지 콘텐츠를 볼 수 있습니다.
이 시점에서 페이지는 대화형이며 사용자는 이벤트를 실행하고 탐색할 수 있습니다.

후속 탐색:

사용자가 다른 페이지로 이동할 때 Nuxt.js는 새로 고침이 아닌 점프를 위해 클라이언트 측 라우팅(Vue Router)을 사용합니다.
새 페이지에 데이터가 필요한 경우 asyncData 또는 fetch 메소드가 클라이언트에서 실행되어 새 데이터를 가져오고 보기를 업데이트합니다.

SSG(정적 사이트 생성):

개발 외부에서는 nuxt generate 명령을 사용하여 정적 HTML 파일을 생성할 수 있습니다.

각 페이지는 필요한 모든 데이터와 리소스가 포함된 별도의 HTML 파일로 사전 렌더링됩니다.

비동기데이터 사용

asyncData 메소드는 Nuxt.js에 고유하며 이를 통해 서버에서 데이터를 프리페치하고 클라이언트에서 재사용할 수 있습니다. 위의 예에서는 단순히 메시지 값만 변경했지만 실제 애플리케이션에서는 API를 호출하여 여기에서 데이터를 가져올 수도 있습니다.

미들웨어

미들웨어(Middleware)는 경로 변경 전후에 특정 로직을 실행할 수 있게 해주는 기능입니다. 미들웨어는 인증, 데이터 사전 로드, 경로 보호 등과 같은 작업을 처리하기 위해 페이지 수준 또는 레이아웃 수준에서 전체적으로 사용할 수 있습니다.

1. 글로벌 미들웨어

전역 미들웨어는 nuxt.config.js 파일에 구성되어 있으며 애플리케이션의 모든 페이지에 영향을 미칩니다.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

미들웨어 파일은 일반적으로 middleware/globalMiddleware1.js와 같은 미들웨어/디렉토리에 있습니다.

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

2. 페이지 수준 미들웨어

페이지 수준 미들웨어는 특정 페이지에만 영향을 미칩니다. 페이지 구성 요소에서 미들웨어를 선언합니다.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

해당 미들웨어 파일은 middleware/디렉토리에 있습니다(예: middleware/pageMiddleware.js:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3. 레이아웃 수준 미들웨어

레이아웃 수준 미들웨어는 페이지 수준과 유사하지만 레이아웃을 사용하는 모든 페이지에 적용됩니다. 레이아웃 구성 요소에서 미들웨어를 선언합니다.

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

해당 미들웨어 파일은 미들웨어/디렉토리에 있습니다.

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

미들웨어의 맥락

미들웨어 함수는 다음 속성을 포함하는 컨텍스트 개체를 매개변수로 받습니다.

• req(HTTP 요청 개체, 서버 측에서만 유효)

• res(HTTP 응답 개체, 서버 측에서만 유효)

• redirect(리디렉션에 사용되는 기능)

• 앱(Vue 인스턴스)

• 경로(현재 경로정보)

• 스토어(Vuex Store, 활성화된 경우)

• 페이로드(asyncData에서 반환된 데이터가 있는 경우)

미들웨어는 순차적으로 실행될 수 있으며 각 미들웨어는 리디렉션 기능을 통해 체인의 다음 미들웨어를 계속 실행할지 아니면 경로를 중단할지 결정할 수 있습니다.

동적 라우팅

Nuxt.js는 블로그 게시물, 사용자 프로필 등과 같은 동적 ID가 있는 콘텐츠를 처리하는 데 매우 유용한 동적 라우팅을 지원합니다. 페이지/ 디렉터리에 [id].vue와 같은 동적 라우팅 파일을 생성하세요.

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

여기서 [id]는 동적 매개변수를 나타내며, asyncData는 자동으로 이 매개변수를 처리하고 해당 ID가 있는 블로그 게시물을 가져옵니다.

레이아웃
레이아웃을 사용하면 전역 또는 특정 페이지의 공통 구조를 정의할 수 있습니다. 레이아웃/디렉토리에 default.vue 파일을 생성합니다:

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

기본적으로 모든 페이지는 이 레이아웃을 사용합니다. 특정 페이지에 대해 다른 레이아웃을 설정하려면 페이지 구성 요소에서 이를 지정할 수 있습니다.

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

플러그인 및 라이브러리 통합
Nuxt.js는 nuxt.config.js에서 구성할 수 있는 Vue.js 플러그인을 지원합니다:

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

그런 다음 vuetify.js와 같은 플러그인/ 디렉토리에 해당 파일을 만듭니다.

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

구성 및 최적화

Nuxt.js 구성 파일(nuxt.config.js)

nuxt.config.js는 Nuxt 애플리케이션의 기본 구성 파일로, 애플리케이션 동작을 사용자 정의하는 데 사용됩니다. 다음은 일반적으로 사용되는 구성 항목입니다.

• 모드: 애플리케이션의 실행 모드를 설정합니다. 선택적 값은 'spa'(단일 페이지 애플리케이션), 'universal'(서버 측 렌더링) 및 'static'(정적 생성)입니다. 기본값은 '유니버설'입니다.
• head: 제목, 메타데이터, 링크 등 페이지의 일부를 구성합니다.
• css: 파일 경로의 배열이 될 수 있는 전역 CSS 파일을 지정합니다.
• 빌드: transpile, extractCSS, 확장 등의 빌드 프로세스를 구성합니다. 예를 들어 여기에서 Babel 플러그인을 추가하거나 Webpack 구성을 조정할 수 있습니다.
• 라우터: 기본 경로, 모드 등 라우팅 구성을 사용자 정의합니다.
• axios: 기본 URL, 프록시 설정 등을 포함하여 axios 모듈을 구성합니다.
• 플러그인: 클라이언트 또는 서버에 로드되도록 지정할 수 있는 전역 Vue 플러그인을 등록합니다.
• 모듈: @nuxtjs/axios, @nuxtjs/proxy 등과 같은 외부 모듈을 로드합니다.
• env: 빌드 시 클라이언트와 서버에 삽입될 환경 변수를 정의합니다.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

최적화 전략

• 비동기 데이터 프리페치(asyncData/fetch): asyncData 또는 fetch 메소드를 사용하여 서버 측에서 데이터를 프리페치하여 클라이언트 렌더링 부담을 줄입니다.
• 코드 분할: Nuxt.js는 해당 경로를 방문할 때만 관련 코드가 로드되도록 자동으로 코드를 분할합니다.
• 정적 사이트 생성(SSG): nuxt generate 명령을 사용하여 정적 HTML 파일을 생성하세요. 이는 콘텐츠 변경이 자주 발생하지 않는 사이트에 적합하며 로딩 속도와 SEO 친화성을 향상시킵니다.
• 캐시 전략: ETag 및 Last-Modified와 같은 HTTP 캐시 전략을 사용하여 중복 요청을 줄입니다.
• Vue.js 최적화: 쓸모없는 감시자 방지, v-once를 사용하여 재렌더링 감소 등 Vue 구성요소 최적화를 보장합니다.
• 이미지 최적화: 올바른 이미지 형식(예: WebP)을 사용하고, 이미지 크기가 적절한지 확인하고, 레이지 로딩 기술을 사용합니다.
• 서비스 워커: PWA 지원을 통합하고 오프라인 캐싱 및 푸시 알림에 서비스 워커를 사용합니다.
• Tree Shaking: 사용하지 않는 코드를 제거하려면 종속성이 Tree Shaking을 지원하는지 확인하세요.
• 분석 및 모니터링: 성능 분석을 위해 nuxt build --제3자 도구(예: Google Lighthouse)를 분석하거나 통합하여 애플리케이션 성능을 지속적으로 모니터링하세요.

SSG(정적 사이트 생성)

Nuxt.js의 SSG(정적 사이트 생성)는 nuxt generate 명령을 통해 구현됩니다. 이 명령은 애플리케이션의 경로를 탐색하고 각 경로에 대해 사전 렌더링된 HTML 파일을 생성합니다. 이 파일은 정적 파일 호스팅 서비스에 직접 배포할 수 있습니다. SSG에 대한 몇 가지 주요 사항은 다음과 같습니다.

1. 구성: nuxt.config.js 파일에서 생성 옵션을 구성하여 정적 생성 동작을 제어할 수 있습니다.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2. 생성: npm run generate 또는 Yarn generate을 실행하여 정적 생성 프로세스를 시작하세요. Nuxt.js는 generate.routes의 구성에 따라 해당 HTML 파일을 생성합니다. 명시적으로 정의하지 않은 경우 자동으로 페이지/ 디렉터리 아래의 모든 파일을 검색하여 경로를 생성합니다.

3. 데이터 미리 가져오기: 페이지 구성 요소에서 asyncData 또는 fetch 메서드를 사용하여 데이터를 미리 가져올 수 있습니다. 이 데이터는 정적 페이지가 생성될 때 HTML에 삽입되므로 클라이언트가 로드될 때 페이지에 추가 요청이 필요하지 않습니다.

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

4. 미들웨어 처리: SSG는 서버 환경 없이 정적 파일을 생성하므로 SSG 프로세스 중에는 서버 측 미들웨어가 실행되지 않습니다. 따라서 생성 시 일부 로직을 실행해야 하는 경우 asyncData 또는 fetch에서 처리하는 것이 가장 좋습니다.

5. 배포: 생성된 정적 파일은 Netlify, Vercel, GitHub Pages 또는 AWS S3와 같은 정적 파일 호스팅 서비스에 배포될 수 있습니다. 이러한 서비스는 일반적으로 서버 측 코드를 실행할 필요가 없으며 생성된 dist 폴더를 업로드하기만 하면 됩니다.

6. SEO 최적화: 검색 엔진 크롤러가 JavaScript가 실행될 때까지 기다리지 않고 사전 렌더링된 HTML 콘텐츠를 읽을 수 있으므로 SSG는 SEO를 개선합니다.

7. 동적 경로: 동적 경로의 경우 Nuxt.js는 가능한 모든 조합을 생성하려고 시도합니다. 가능한 모든 동적 경로를 예측할 수 없는 경우 generate.routes에서 수동으로 지정하거나 generate.includePaths 및 generate.excludePaths를 사용하여 제어할 수 있습니다.

8. 404 페이지: generate.fallback을 true로 설정하면 사전 렌더링되지 않은 동적 경로에 대해 404 페이지가 생성됩니다. 사용자가 이러한 경로를 방문하면 Nuxt.js는 클라이언트 측에서 해당 경로를 렌더링하려고 시도합니다.

nuxt generate 명령을 실행하면 Nuxt.js가 정적 HTML 파일을 생성합니다.

검증 및 오류 처리

확인

검증에는 일반적으로 양식 데이터 또는 API 요청의 입력 검증이 포함됩니다. Nuxt.js 자체는 유효성 검사 라이브러리를 직접 제공하지 않지만 Vuelidate, vee-validate와 같은 타사 라이브러리를 통합하거나 유형 검사를 위해 TypeScript를 사용할 수 있습니다.

Vee-Validate 사용
1. 설치: 먼저 vee-validate 라이브러리를 설치해야 합니다.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2. 구성: nuxt.config.js에 Vue 플러그인 구성을 추가합니다:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3. 플러그인 생성: 플러그인/vee-validate.js에서 Vee-Validate 구성:

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

4. 사용법: 구성 요소의 양식 유효성 검사에 Vee-Validate를 사용합니다.

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

오류 처리

Nuxt.js는 전역 오류 처리 및 페이지별 오류 처리를 포함하여 오류를 처리하는 여러 가지 방법을 제공합니다.

전역 오류 처리

• 사용자 정의 오류 페이지: 오류 페이지 레이아웃을 사용자 정의하려면 레이아웃 디렉터리에 error.vue 파일을 생성하세요.
• 전역 오류 캡처: nuxt.config.js에서 오류 속성을 구성하여 전역 오류를 캡처합니다.

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

페이지별 오류 처리

페이지 구성 요소에서는 asyncData 또는 fetch 메서드의 try-catch 구조를 사용하여 오류를 처리할 수 있습니다.

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

API 요청 오류 처리

API 요청의 경우 @nuxtjs/axios 모듈을 사용하면 요청 인터셉터에서 오류를 균일하게 처리할 수 있습니다.

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

이 플러그인을 nuxt.config.js에 등록하세요.

Vue 생태계 통합

Vue 라우터:

Nuxt.js는 파일 구조를 기반으로 애플리케이션에 대한 라우팅 시스템을 자동으로 생성합니다. 라우팅 구성은 일반적으로 수동으로 작성할 필요가 없지만 nuxt.config.js의 라우터 속성을 통해 확장할 수 있습니다.

뷰엑스:

Nuxt.js는 Vuex 스토어를 자동으로 생성합니다. 저장소 디렉터리 아래에서 모듈식 상태, 변형, 작업 및 getter를 생성할 수 있습니다. 예를 들어 사용자 데이터를 관리하려면 store/modules/users.js 파일을 생성하세요.

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

뷰 CLI:

Nuxt.js는 자체 빌드 도구를 제공하지만 Vue CLI를 기반으로 합니다. 이는 npx nuxt generate(정적 생성) 또는 npx nuxt build(빌드 애플리케이션)와 같은 Vue CLI와 유사한 명령줄 도구를 사용할 수 있음을 의미합니다.

바벨:

Nuxt.js는 기본적으로 최신 JavaScript 기능을 지원하기 위해 Babel로 구성됩니다. 특별한 필요가 없는 한 일반적으로 Babel을 수동으로 구성할 필요가 없습니다.

타입스크립트:

TypeScript를 사용하려면 nuxt.config.js에서 typescript: true를 설정하면 Nuxt.js가 자동으로 TypeScript 지원을 구성합니다.

ESL린트:

코드 품질 확인을 위해 프로젝트에 ESLint를 설치하고 .eslintrc.js를 구성할 수 있습니다. Nuxt.js는 통합을 단순화하기 위해 @nuxt/eslint-module 플러그인을 제공합니다.

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

Vue사용:

VueUse는 다양한 실용적인 기능을 담은 Vue 유스케이스 라이브러리입니다. 통합하려면 먼저 @vueuse/core를 설치한 다음 구성 요소의 기능을 가져와 사용하세요.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

Vue 플러그인:

nuxt.config.js의 플러그인 구성 항목을 통해 Vue 플러그인을 전역적으로 등록할 수 있습니다. 예를 들어 Vue Toastify를 통합하여 알림을 표시합니다.

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

Nuxt.js를 사용한 워크플로우

Nuxt.js는 개발, 구축, 배포를 위한 완벽한 워크플로를 제공합니다. nuxt 명령을 사용하여 개발 서버를 시작하고, nuxt build를 사용하여 프로덕션 빌드를 수행하고, nuxt start를 사용하여 프로덕션 서버를 시작하고, nuxt generate를 사용하여 정적 파일을 생성합니다.

성능 최적화

1. 정적 생성(SSG): nuxt generate 명령을 사용하여 사전 렌더링된 HTML 파일을 생성하면 첫 화면 로딩 속도가 크게 향상되고 SEO 친화적입니다.

2. 코드 분할: Nuxt.js는 기본적으로 코드 분할을 수행하여 애플리케이션을 여러 개의 작은 블록으로 나누고 현재 페이지에 필요한 코드만 로드하여 초기 로딩 양을 줄입니다.

3. 지연 로딩: 대규모 애플리케이션의 경우 구성 요소나 모듈을 지연 로딩하는 것을 고려하고 필요할 때만 로드할 수 있습니다. 를 사용할 수 있습니다. 또는 이를 달성하기 위해 비동기 구성 요소와 결합됩니다.

4. 리소스 최적화:

• 이미지: 올바른 형식(예: WebP) 사용, 이미지 압축, 지연 로딩() 사용 또는 nuxt- 사용 이미지 또는 nuxt-picture 구성 요소.

• CSS: CSS를 별도의 파일로 추출하고 인라인 스타일을 줄입니다.

• JS: Tree Shaking을 사용하여 사용하지 않는 코드를 제거하세요.

1. 비동기 데이터 미리 가져오기: asyncData 또는 fetch 메소드를 사용하여 데이터를 미리 로드하여 렌더링 전에 데이터가 준비되었는지 확인하세요.

2. 서버 측 캐싱: nuxt-ssr-cache 모듈을 사용하여 서버 측 렌더링 결과를 캐시하고 불필요한 API 호출을 줄입니다.

3. HTTP 캐싱: 올바른 캐시 헤더(예: Cache-Control)를 설정하고 브라우저를 사용하여 정적 리소스를 캐시합니다.

4. 경로 가드: 필요하지 않을 때 데이터 로드를 방지하려면 beforeRouteEnter와 같은 경로 가드를 사용하세요.

5. HTTP 요청 줄이기: 여러 CSS 및 JS 파일을 결합하여 HTTP 요청 수를 줄입니다.

6. API 성능 최적화: 백엔드 인터페이스를 최적화하고, 응답 시간을 줄이고, 페이징, 필터링, 캐싱 전략을 사용합니다.

7. CDN 활용: CDN에 정적 리소스를 호스팅하여 전 세계 사용자의 로딩 속도를 높입니다.

8. Vuex 상태 관리 최적화: 불필요하게 계산된 속성과 리스너를 피하여 상태 변경으로 인한 오버헤드를 줄입니다.

9. 성능 감사: Lighthouse, Chrome DevTools 또는 기타 성능 감사 도구를 사용하여 정기적으로 애플리케이션 성능을 확인하고 보고서를 기반으로 개선합니다.

10. 서비스 워커: 해당하는 경우 PWA 기능을 통합하고 오프라인 캐싱 및 리소스 사전 로드를 위해 서비스 워커를 사용하세요.

11. 모듈 최적화: 고성능 타사 모듈을 선택하고 SSR에 최적화되었는지 확인하세요.

위 내용은 Nuxt.js 작동: Vue.js 서버 측 렌더링 프레임워크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!