Nuxt

Nuxt 란?

Vue.js 를 가지고 SSR + CSR 같은 웹을 제작할 수 있도록 해주는 프레임워크입니다.

nuxt 라이프싸이클에 대표적인 이미지

CSR vs SSR

기본적으로 SPA 는 CSR 방식으로 최초 페이지를 로딩한 시점부터 페이지 렌더링 없이 부분부분 만을 렌더링하는 방법이다.
react, vue 또는 webpack 에 핫로딩이 있다.

하지만, 서버에서 뷰를 렌더링하는 방식이 아닌, 클라이언트에서 HTML, JS, CSS 등 각종 리소스를 다운받은 이후, 렌더링 작업을 하기 때문에 SSR 보다는 초기 화면이 보이는 시간이 길어진다. 이런 방식 때문에 검색엔진에서는 검색시 빈 페이지로 인식하기 때문에 CSR 을 사용하지 않고 SSR 기법을 사용한다.
SSR 은 서버에서 사용자에게 보여줄 페이지를 모두 렌더링하여 띄우는 방식으로 요청시마다 새로고침이 일어난다. 첫 로딩이 매우 짧고 SEO 적용시 큰 문제가 없다.

SEO (Search Engine Optimzation): 웹 사이트가 검색 결과에 더 잘보이도록 최적화하는 과정.

CSR 과 SSR 을 둘 다 사용할 수 있도록 하는 것이 Nuxt 가 하는 동작이다. (SSR, CSR 의 단점을 보완)

장점

• 검색 엔진 최적화 (SEO)
• 초기 프로젝트 셋팅
• CSR, SSR 의 장점들을 사용가능함.

특징

• 서버 사이드 렌더링
• 규격화된 폴더 구조(layout, store, middleware, plugins)
• pages 폴더 기반의 자동 라우팅 설정
• 코드 스플리팅
• 비동기 데이터 요청 속성
• ES6+
• 웹팩을 비롯한 기타 설정

시작하기

yarn create nuxt-app <project-name>

폴더 규칙

assets - 이미지, 리소스 파일

components - 뷰 컴포넌트

layouts - 라우터를 기준으로 특정 URL 에 접근했을 때 뿌려지는 페이지 컴포넌트에 최상위 루트 컴포넌트 (공통 컴포넌트)

middleware - 서버 사이드 렌더링을 진행할때 서버에서 브라우저로 넘기기 전 실행하는 함수들

pages - 파일 기반의 라우팅

plugins - 뷰 플러그인

static - 빌드 했을 때 서버의 루트 주소로 옮길 변경이 필요하지 않는 파일들 (정적자원)

store - vuex

nuxtServerInit

스토어에 데이터가 담겨진 상태로 스토어가 생성됩니다.

위 함수는 서버 사이드 렌더링 시점에 실행되기 때문에 스토어에 미리 데이터를 설정해 놓거나 서버에서만 접근할 수 있는 데이터를 다룰 때 유용합니다. 만약, 서버에서 세션을 관리하는 구조이고 세션에 연결된 사용자 정보를 스토어에 저장해야 할 때 위와 같은 방식으로 사용자 정보를 스토어에 미리 담아놓을 수 있습니다.

store 루트에 만들어져야 합니다.  actions 에 정의하는 함수로 아래와 같이 사용할 수 있습니다.

// store/index.js
actions: {
  nuxtServerInit(storeContext, nuxtContext) {
    storeContext.commit('뮤테이션 함수명');
    if (process.server) {
      const { req, res, beforeNuxtRender } = nuxtContext;
    }
  }
}

storeContext 는 store 입니다. nuxtContext 는 asyncData 의 context 파라미터와 같습니다.

Nuxt 에서 전역 css 설정

nuxt.config.js 에서 css 설정 키에 배열 안에 해당 경로의 css 를 넣어주면 됨.

css: ['@/assets/css/index.css']

 

동적 라우팅

Nuxt 에서 동적라우팅 하는 방법으로 pages 폴더 아래에 _ 를 이용하여 파일을 만듭니다. 예를 들어 detail/1.vue 라면, detail 폴더를 하나 만들고 _id.vue 라는 파일을 만들도록 합니다. 그러면 _ 는 라우터의 파라미터 이고 id 는 값으로 인식하여 자동으로 동적 라우팅이 된 것을 확인할 수 있습니다.