Nuxt 기반 Vue.js 서버 렌 더 링 실천 에 대한 자세 한 설명

Vue.js 는 현재 가장 핫 한 전단 프레임 워 크 중 하나 이 고 Nuxt.js 는 Vue.js 가 내 놓 은 서버 렌 더 링 프레임 워 크 입 니 다.고도 의 맞 춤 형 설정 과 간결 한 API 를 통 해 개발 자 는 서버 렌 더 링 프로젝트 의 개발 을 신속하게 진행 할 수 있 습 니 다.본 고 는 Nuxt.js 프레임 워 크 에 대해 간략하게 소개 하고 자 합 니 다.
서버 렌 더 링
서버 사 이 드 렌 더 링(Server Side Render)은 새로운 개념 이 아 닙 니 다.단일 페이지 애플 리 케 이 션(SPA)이 유행 하지 않 았 을 때 페이지 는 서버 사 이 드 렌 더 링 을 통 해 브 라 우 저 에 전 달 됩 니 다.사용자 가 새로운 페이지 에 접근 하려 면 서버 에 다시 요청 하고 새로운 페이지 로 돌아 가 야 합 니 다.
체험 을 최적화 하기 위해 개발 자 들 은 JavaScript 를 사용 하여 전단 에서 렌 더 링 과정 을 완성 하고 앞 뒤 단 을 분리 하 는 수단 으로 백 엔 드 를 데이터 에 더욱 집중 시 키 기 시 작 했 습 니 다.한편,전단 은 전 시 를 처리 하 는 것 을 중시 하고 디자인 이 좋 은 API 와 Ajax 기술 을 통 해 앞 뒤 단의 상호작용 을 완성 하 며 jQuery,React.js,Vue.js,Angular.js 등 프레임 워 크 가 생 겨 났 습 니 다.
이러한 프레임 워 크 는 개발 자 에 게 커 다란 편 의 를 가 져 다 주 었 지만 일부 포럼,정보 사이트,또는 기업 의 공식 사이트 에 있어 그들 은 검색엔진 최적화(SEO)에 강 한 요 구 를 가지 고 전단 렌 더 링 기술 은 그들의 수 요 를 만족 시 킬 수 없다.검색엔진 의 검색 을 통 해 자신의 내용 을 출력 할 수 없다 면 사이트 의 가 치 는 큰 영향 을 받 을 것 이다.이런 문 제 를 해결 하려 면 서버 에 의 해 렌 더 링 해 야 한다.
본 고 는 Vue.js 의 서버 렌 더 링 솔 루 션 Nuxt.js 를 소개 합 니 다.Vue.js 가 출시 된 후에 데이터 구동 과 구성 요소 화 사상,그리고 간결 하고 손 쉽게 사용 할 수 있 는 특성 은 개발 자 에 게 큰 편 의 를 가 져 다 주 었 습 니 다.Vue.js 가 공식 적 으로 제공 한vue-server-renderer은 서버 에서 렌 더 링 하 는 작업 을 할 수 있 지만 추가 적 인 업 무량 을 늘 려 야 하고 개발 체험 이 향상 되 어야 합 니 다.Nuxt.js 가 출시 된 후에 이 문 제 는 잘 해결 되 었 습 니 다.
Nuxt.js 프로필
Nuxt.js 는 Vue.js 를 기반 으로 한 유 니 버 설 응용 프레임 워 크 입 니 다.Nuxt.js 는 Vue.js 를 이용 하여 서버 렌 더 링 을 개발 하 는 데 필요 한 다양한 설정 을 미리 설정 하고 정적 사이트 를 원 키 로 생 성 할 수 있 습 니 다.이 동시에 Nuxt.js 의 핫 로드 체 제 는 개발 자 들 로 하여 금 사이트 개발 을 매우 편리 하 게 할 수 있다.
Nuxt.js 는 2016 년 10 월 25 일 에 발표 되 었 고 출시 된 지 1 년 이 되 지 않 았 지만 광범 위 한 호평 을 받 았 다.최신 안정 버 전 은 0.10.7 이 고 현재 1.0 버 전의 내부 테스트 를 실시 하고 있 으 며 Nuxt.js 커 뮤 니 티 도 점차적으로 보완 되 고 있다.홈 페이지 는 중국어 문 서 를 지원 했다.
간단 한 착수
Vue.jsvue-cli도 구 는 기 존의 템 플 릿 을 사용 하여 Vue.js 프로젝트 를 초기 화 할 수 있 습 니 다.Nuxt.js 팀 은 Nuxt.js 프로젝트 를 초기 화 하 는 템 플 릿 을 제공 해 주 었 습 니 다.설치vue-cli한 후 명령 줄 에 만 입력 하 십시오.

vue init nuxt/starter <projectName>

프로젝트 생 성 작업 을 완료 하고 프로젝트 디 렉 터 리 에 들 어가 다음 명령 을 수행 할 수 있 습 니 다.

npm installnpm run dev

Nuxt.js 는3000포트 로 서 비 스 를 실행 합 니 다.브 라 우 저 에http://localhost:3000를 입력 하면 Nuxt.js 로고 가 있 는 원본 페이지 를 볼 수 있 습 니 다.
프로젝트 목록
간단 한 Hello World 프로젝트 를 완성 한 후에 우 리 는 Nuxt.js 를 더욱 연구 할 것 이다.Nuxt.js 프로젝트 에 들 어가 면 프로젝트 디 렉 터 리 는 다음 과 같 습 니 다.

다음은 각 디 렉 터 리 의 역할 을 간략하게 소개 합 니 다..nuxt/:Nuxt.js 의 핵심 라 이브 러 리 파일 을 저장 하 는 데 사 용 됩 니 다.예 를 들 어 이 디 렉 터 리 에서server.js파일 을 찾 을 수 있 습 니 다.Nuxt.js 가 서버 에서 렌 더 링 을 하 는 논리(다음'Nuxt.js 의 렌 더 링 프로 세 스 참조),router.js파일 은 자동 으로 생 성 된 경로 표를 포함 합 니 다.assets/:정적 자원 을 저장 하 는 데 사 용 됩 니 다.이 디 렉 터 리 의 자원 은 웹 팩 으로 구 축 됩 니 다.components/:프로젝트 의 각종 구성 요 소 를 저장 합 니 다.이 디 렉 터 리 에 있 는 파일 만 구성 요소 라 고 할 수 있 습 니 다.layouts/:사용자 정의 페이지 레이아웃 을 만 듭 니 다.이 디 렉 터 리 에서 전체 페이지 의 통 일 된 레이아웃 을 만 들 거나 잘못된 페이지 레이아웃 을 만 들 수 있 습 니 다.레이아웃 에 디 렉 터 리 의 경로 페이지 를 렌 더 링 하려 면 레이아웃 파일 에pages탭 을 추가 해 야 합 니 다.<nuxt />:사용자 정의 미들웨어 를 설치 하고 구성 요 소 를 불 러 오기 전에 호출 합 니 다.middleware/:이 디 렉 터 리 에서 Nuxt.js 는 디 렉 터 리 의 구조 에 따라 생 성pages/경로 입 니 다.자세 한 내용 은 다음 과 같 습 니 다.vue-router:이 디 렉 터 리 에 사용자 정의 플러그 인 을 설치 하여 루트plugins/대상 을 예화 하기 전에 실행 할 수 있 습 니 다.예 를 들 어 프로젝트 의 매 립 점 논 리 를 플러그 인 으로 봉 하여 이 디 렉 터 리 에 놓 고Vue에 불 러 올 수 있 습 니 다.nuxt.config.js:웹 팩 으로 구 축 된 정적 자원 을 사용 하지 않 으 면 루트 경로 에 비 칩 니 다.예 를 들 어static/robots.txt:Vuex 상태 트 리 를 저장 합 니 다.store/:Nuxt.js 의 프로필 은 다음 과 같 습 니 다.
Nuxt.js 렌 더 링 프로 세 스
Nuxt.js 는 Vue.js 위 에 구 축 된 일련의 방법 으로 서버 렌 더 링 을 하고 구체 적 인 절 차 는 다음 과 같다.
호출nuxt.config.js방법
입력 을 요청 할 때 가장 먼저 호출 하 는 방법 은nuxtServerInit입 니 다.이 방법 을 통 해 로그 인 한 사용자 정보 등 서버 의 데 이 터 를 미리 저장 할 수 있 습 니 다.또한 이 방법 에서 도 비동기 작업 을 수행 하고 데이터 분석 을 기다 리 며 돌아 올 수 있다.nuxtServerInit층
첫 번 째 단 계 를 거 친 후 요청 은Middleware층 에 들 어 갑 니 다.이 층 에서 세 단계 작업 이 있 습 니 다.
전역Middleware필드 의 설정 을 읽 고 해당 하 는 미들웨어 방법 을 호출 하여 요청 에 대응 하 는nuxt.config.js호출middleware과layout미들웨어 방법 을 불 러 옵 니 다.
호출layout방법
이 단계 에서 요청 한 매개 변 수 를 검사 하거나 첫 번 째 단계 에서 서버 에서 보 낸 데 이 터 를 검사 할 수 있 습 니 다.검사 에 실패 하면 404 페이지 를 던 집 니 다.
호출page및validate방법
이 두 가지 방법 은 모두 구성 요소 가 불 러 오기 전에 호출 됩 니 다.그들의 직책 은 각각 다 릅 니 다.fetch비동기 적 으로 구성 요소 데 이 터 를 초기 화 하 는 데 사 용 됩 니 다.asyncData방법 은 비동기 적 으로 데 이 터 를 가 져 온 후에 Vuex 의 상 태 를 수정 하 는 데 편중 되 어 있 습 니 다.
우 리 는 Nuxt.js 의 소스 코드asyncData에서 다음 과 같은 방법 을 볼 수 있다.

export function applyAsyncData (Component, asyncData = {}) {
 const ComponentData = Component.options.data || noopData
 Component.options.data = function () {
  const data = ComponentData.call(this)
  return { ...data, ...asyncData }
 }
 if (Component._Ctor && Component._Ctor.options) {
  Component._Ctor.options.data = Component.options.data
 }
}

이 방법 은fetch방법 이 호출 된 후에 호출 될 것 이다.이 를 통 해 알 수 있 듯 이 구성 요소 가util.js방법 에서 얻 은 데 이 터 는 구성 요소 의 원생asyncData방법 으로 얻 은 데이터 와 합 쳐 지고 최종 적 으로asyncData방법 에서 되 돌아 올 것 이다.data방법 은 실제 원생data방법의 확장 이다.
상기 네 단 계 를 거 친 후에 그 다음은 렌 더 링 구성 요소 의 작업 입 니 다.전체 과정 은 다음 그림 으로 표시 할 수 있 습 니 다.

(사진 출처:Nuxt.js 홈 페이지)
앞에서 말 한 바 와 같이asyncData디 렉 터 리 에서data파일 을 찾 을 수 있 습 니 다.이 파일 은 Nuxt.js 가 서버 에서 렌 더 링 하 는 논 리 를 봉 인 했 습 니 다.완전한.nuxt대상 의 체인 호출 을 포함 하여 위 에서 설명 한 전체 서버 렌 더 링 을 완성 하 는 단계 입 니 다.
Nuxt.js 의 사용 방법
nuxt.config.js 설정server.js는 Nuxt.js 의 프로필 입 니 다.일련의 매개 변수 에 대한 설정 을 통 해 Nuxt.js 프로젝트 의 설정 을 완성 할 수 있 습 니 다.Nuxt.js 홈 페이지 에서 이 파일 에 대한 설명 을 찾 을 수 있 습 니 다.다음은 자주 사용 하 는 설정 을 예 로 들 어 보 겠 습 니 다.
head:이 설정 항목 에서 전체Promise를 설정 할 수 있 습 니 다.예 를 들 어 사이트 의 제목 을 정의 하고nuxt.config.js제3자 CSS,JavaScript 파일 등 을 도입 할 수 있 습 니 다.

head: {
   title: '    ',
   meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'applicable-device', content: 'pc,mobile' },
   ],
   link: [
      { rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'}
   ],
   script: [
      {src: 'https://code.jquery.com/jquery-3.1.1.min.js'},
      {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'}
   ]
 },

build:이 설정 은 Nuxt.js 프로젝트 의 구축 규칙,즉 Webpack 의 구축 설정 을 설정 하 는 데 사 용 됩 니 다.예 를 들 어 vendor 필드 를 통 해 제3자 모듈 을 도입 하고 plugin 필드 를 통 해 Webpack 플러그 인 을 설정 하 며 loaders 필드 를 통 해 Webpack 로 더 를 사용자 정의 하 는 등 입 니 다.보통 build 의 vendor 필드 에head모듈 을 도입 하여 프로젝트 에서 HTTP 요청meta을 하 는 것 도 Vue.js 가 공식 적 으로 추천 하 는 HTTP 요청 프레임 워 크 입 니 다.

build: {
   vendor: ['core-js', 'axios'],
   loaders: [
     {
       test: /\.(scss|sass)$/,
       use: [{
         loader: "style-loader"
       }, {
         loader: "css-loader"
       }, {
         loader: "sass-loader"
       }]
     },
     {
       test: /\.(png|jpe?g|gif|svg)$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'img/[name].[hash:7].[ext]'
       }
     },
     {
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'fonts/[name].[hash:7].[ext]'
       }
     }
   ]
 }

css:이 설정 항목 에 전역 적 인 CSS 파일 을 도입 하면 모든 페이지 가 도 입 됩 니 다.
router:이 경로 의 기본 규칙 을 설정 하고 미들웨어 설정 을 할 수 있 습 니 다.예 를 들 어axios를 가 져 올 미들웨어 를 만 들 고 불 러 올 수 있 습 니 다.
loading:Nuxt.js 는 페이지 에 진행 지시 구성 요 소 를 불 러 옵 니 다.색상 을 설정 하거나 사용 하지 않 거나 사용자 정의 로 딩 구성 요 소 를 설정 할 수 있 습 니 다.
env:서버 와 클 라 이언 트 가 공유 할 전역 변 수 를 설정 할 수 있 습 니 다.
디 렉 터 리 경로
Nuxt.js 는axios위 에서 자동화 생 성 규칙,즉 pages 의 디 렉 터 리 구조 에 따라 생 성 되 는 것 을 정의 했다.예 를 들 어 우 리 는 다음 과 같은 디 렉 터 리 구 조 를 가지 고 있다.

이 디 렉 터 리 아래 에 기본 경로(매개 변수 없 음)와 두 개의 동적 경로(매개 변수 있 음)가 포함 되 어 있 습 니 다.Nuxt.js 는 다음 과 같은 경로 설정 표를 생 성 합 니 다User-Agent디 렉 터 리 아래vue-router파일 에서 찾 을 수 있 습 니 다).

routes: [
  {
    path: "/",
    component: _abe13a78,
    name: "index"
  },
  {
    path: "/article/:id?",
    component: _48f202f2,
    name: "article-id"
  },
  {
    path: "/:page",
    component: _5ccbb43a,
    name: "page"
  }
]

.nuxt이 경로 에router.js인 자 를 가지 고 있 는 것 은 선택 할 수 있 는 경로 임 을 나타 낸다.이 를 필수 로 설정 하려 면article-id디 렉 터 리 에:id?파일 을 추가 해 야 한다.
다음 예 를 보십시오.

같은 이름 의 파일 과 폴 더 가 존재 하기 때문에 Nuxt.js 는 포 함 된 루트 를 생 성 합 니 다.생 성 된 루트 구 조 는 다음 과 같 습 니 다.사용 할 때 하위 보기 의 내용 을 표시 하기 위해 탭 을 추가article해 야 합 니 다.

routes: [
  {
    path: "/article",
    component: _f930b330,
    children: [
      {
        path: "",
        component: _1430822a,
        name: "article"
      },
      {
        path: ":id",
        component: _339e8013,
        name: "article-id"
      }
    ]
  }
]

또한,Nuxt.js 는 동적 끼 워 넣 기 루트 를 설정 할 수 있 으 며,구체 적 으로 Nuxt.js 의 공식 문 서 를 참조 할 수 있 습 니 다.
총결산
Nuxt.js 는 매우 젊 은 프레임 워 크 임 에 도 불구 하고 현재 개선 해 야 할 문제 가 많 지만 Vue.js 개발 자 에 게 서버 렌 더 링 프로젝트 를 구축 하 는 데 큰 편 의 를 제공 합 니 다.Nuxt.js 1.0 버 전이 발표 되면 우리 에 게 더 많은 실 용적 인 새로운 기능 을 가 져 다 줄 수 있 기 를 기대 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.