nuxt 의 라이프사이클과 상황에 따른 server, client 측의 실행 주체 > IT 기술백서

실행순서 및 상황에 따른 실행주체

1. 페이지에 첫 진입했거나 새로고침시

2. 1번 이후부터 페이지 이동시 (클라이언트에서 링크를 눌러서 이동시)

즉, 처음 해당주소로 진입시는 서버에서 html을 자체적으로 어느정도 렌더링한 뒤 그 결과를(프리렌더링) 클라이언트에게 보내고 클라이언트는 받은 결과를 javascript를 이용해 더 완벽하게 렌더링하여(하이드레이션) 브라우저에 뿌려준다.

그 이후부터는 클라이언트가 spa 처럼 javascript 로 자체적으로 렌더링한다.

이렇게 함으로서 서버에서 프리랜더링하여 해당 url의 맞춤 내용을 뿌려주기 때문에 검색엔진 로봇이 해당페이지의 내용을 가져갈수 있다.  이로써 seo에 유리해진다.

spa 에서는 들어갈때마다 매번 똑같은 페이지이다.

각 단계 설명

1. modules

    nuxt.config.js 의 modules 섹션에 정의된 모듈을 로드한다.

2. Server middleware

    nuxt.config.js 의 serverModules: [] 섹션에 정의된 미들웨어를 로드한다.

3. Plugin

    nuxt.config.js 의 plugins: [] 섹션에 정의된 플러그인을 로드한다.

4. nuxtServerInit()

    /store/index.js 의 actions 에 정의된 뮤테이션이며 페이지 진입시 딱 한번만 서버에서 실행한다.

    store 를 미리 채워주기 위해 사용하며 주로 다른 액션을 한꺼번에 dispatch 하는 식으로 사용한다.

5. Global middleware

    nuxt.config.js 의 router.middleware 섹션에서 정의된 전역 미들웨어를 로드한다.

6. Layout middleware

    /layouts 디렉토리 내의 레이아웃 컴포넌트에 middleware 섹션에 정의된 미들웨어를 로드한다.

7. Page middleware

    /pages 디렉토리 내의 컴포넌트에 middleware 섹션에 정의된 미들웨어를 로드한다.

8. validate()

    페이지를 이동할때마다 매번 불려지면 라우트 파라미터를 검증하는 메소드이다.

    성공 실패여부를 true 또는 false 로 반드시 리턴해줘야 한다.

9. asyncData()

    비동기 데이터(서버에서 불러와야 하는 데이터)를 vue 컴포넌트의 data와 합쳐주는 역할을 한다.

    인스턴스화 되기 전에 호출되므로 this를 사용할 수 없다.

10. beforeCreate()

    인스턴스 생성되기 전에 호출

11. created()

    인스턴스 생성되고 난 뒤에 호출

12. beforeMount()

    DOM에 마운트 되기 전에 호출

13. fetch()

    여러번 호출이 가능하며 함수처럼 사용가능하다.

    $fetchState 를 통해 peding, error 상태값을 통해 렌더링을 구성할 수 있다.

    this를 사용할 수 있다.

    created() 후에 $fetchState.pending = true 이며

    mounted() 후에 $fetchState.pending = false 가 된다.

14. mounted()

    DOM에 마운트 되고 난뒤에 호출