[vue.js / Nuxt] Nuxt 기초 (1)라우팅, SSR, SSG

자동 라우팅

pages 디렉토리 안에 있는 vue 파일들은 자동으로 라우팅 됩니다 ⇒ router.js 파일이 필요 없습니다.

동시에 code splitting 도 함께 제공합니다.

네비게이션

페이지간 이동에는 NuxtLink를 사용해야 합니다.

page 디렉토리는 view와 route를 담고 있습니다. Nuxt는 page디렉토리안의 모든 .vue파일을 읽고 그 파일에 해당하는 라우터를 만듭니다.

 

 

Nuxt SSR

Nuxt의 Server Side Rendering steps

1. Browser to Server

브라우저가 최초 요청을 보내면 내부 Node.js 서버에 도달합니다. Nuxt는 lifecycle hooks, asyncData, nuxtServerInit, fetch 등 실행된 함수의 결과들과 함께 HTML을 생성하고 이를 다시 브라우저로 돌려보냅니다.

2. Server to Browser

브라우저가 서버로부터 렌더링된 HTML 페이지를 받으면 vue.js hydration 을 적용하여 page를 상호작용할 수 있는 형태로 변경합니다.

3. Browser to Browser

브라우저 안에서 NuxtLink 태그를 이용하여 client side에서 네비게이션 합니다.

Nuxt SSG

Nuxt의 Static Site Generation steps

1. Browser to CDN

브라우저가 CDN으로 최초의 요청을 보냅니다.

2. CDN to Browser

CDN은 이미 만들어진 HTML 과, 자바스크립트, 정적 assets 파일을 브라우저로 보냅니다.

내용이 보여지고 Vue.js hydration이 일어나 상호작용이 가능한 형태로 변경됩니다.

3. Browser to Browser

클라이언트 사이드에서 네비게이팅이 일어나 더이상 CDN으로의 요청은 가지 않습니다. API Call은 이미 캐싱된 정적 폴더에서 로드됩니다.