실행순서 및 상황에 따른 실행주체
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에 마운트 되고 난뒤에 호출
