Mode Property

SPA

No server-side rendering (only client-side navigation)

Universal (SSR)

Isomorphic application (server-side rendering + client-side navigation)
첫 페이지 요청 시에는 서버 사이드 렌더링을 하고, 두번째 요청부터는 클라이언트에서 렌더링을 한다.

Isomorphic application

동형 자바스크립트.
서버와 클라이언트가 동일한 코드로 동작한다는 뜻이다.

SSR VS SPA

SSR 웹 페이지

path로 /about 를 입력하면, about.html 을 반환한다.

SPA 웹 페이지

path로 /about 를 입력하면 index.html 을 반환하고, Vue Router 가 about page를 로딩한다.

spa의 특징

1. 첫 로딩이 느리다
   spa의 첫 진입시에 다음과 같은 일련의 작업이 일어난다.
   a. index.html 다운로드
   b. spa에서 사용할 모든 리소스 파일(Html, CSS, JS) 다운
   c. spa 앱 초기화
   d. Vue Router를 초기화 하고, 해당하는 컴포넌트로 route 한다.
   e. data를 fetch 하기 위해서 필요한 api 호출을 한다.
   f. 페이지에 templates를 랜더링한다.

2. 두 번째 로딩부터는 UI가 빠르게 동작한다.
   페이지 이동시 필요한 api만 호출하고, 기존 페이지의 내부를 수정해서 랜더링 하기 때문

Universal (SSR) 웹 페이지

SEO

https://vue-meta.nuxtjs.org/

spa에서 구현한 SEO

정확히 해당 페이지에서 사용할 SEO가 반영 되려면 JS가 업데이트 해줄때까지 기다려야한다.

Universal App 에서 구현한 SEO

JS를 로딩할 필요없이 첫번째 html로딩에서 이미 정확한 SEO 값을 갖고 있다.

Route

nuxt에서는 vue에서와 달리 route를 위한 /router/index.html 을 직접 관리할 필요가 없다.
빌드 시 pages 폴더 밑에 있는 파일 및 폴더 구조에 따라 ./nuxt/router.js 에 자동으로 생성된다.

Error Page

Error page는 접근한 페이지에서 에러가 발생했을 때(ex. 404) 나타나며, 해당 에러는 props를 통해 전달 받을 수 있다.

SPA 에서는 존재하지 않는 페이지에 접근하여도, index.html을 반환하기 때문에 네트워크에서 404 에러가 발생하지 않는다. 따라서 존재하지 않는 페이지라 하더라도 (404 에러가 발생하지 않기 때문에) SEO가 반영되어 검색엔진에서 나타날 수 있다.

SSR을 이용한 Nuxt에서는 알맞은 상태코드를 반환한다.

에러 페이지는 반드시 layouts/error.vue 에 위치해야 하며, 이 파일을 통해 커스텀 할 수 있다.

 props: {
    error: {
      // <--- Send in the error
      type: Object,
      default: null,
    },
  },

API 호출

Universal App 은 초기 페이지 호출시, 서버에서 API를 호출한다.

이후 두번째 페이지 이동 부터는 SPA와 같이 클라이언트에서 API를 호출한다.

즉, Universal App에서의 API 호출은 서버-사이드와 클라이언트-사이드 양쪽에서 모두 일어날 수 있다.

[참조] https://medium.com/aha-official/%EC%95%84%ED%95%98-%ED%94%84%EB%A1%A0%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EA%B8%B0-1-spa%EC%99%80-ssr%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EA%B7%B8%EB%A6%AC%EA%B3%A0-nuxt-js-cafdc3ac2053

https://www.vuemastery.com/courses/scaling-vue-with-nuxt-js/why-use-nuxt