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

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

 

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

  Server Client 
modules  실행  
Server Middleware 실행  
Plugin  실행 실행
nuxtServerInit()  실행  
Global middleware  실행  
Layout middleware  실행  
Page middleware  실행  
validate()  실행  
asyncData()  실행  
beforeCreate()  실행 실행
created()  실행 실행
beforeMount()   실행
fetch()  실행  
mounted()    실행

 

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

  Server Client 
modules   
Server Middleware  
Plugin   
nuxtServerInit()   
Global middleware   실행
Layout middleware     실행 
Page middleware    실행
validate()    실행
asyncData()    실행
beforeCreate()    실행
created()    실행
beforeMount()   실행
fetch()    실행
mounted()    실행

 

즉, 처음 해당주소로 진입시는 서버에서 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에 마운트 되고 난뒤에 호출

 

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤