nuxt2

Nuxt.js

• Nuxt configuration file

SSR (Universal) vs SPA vs SSG

-	SSR	SPA	SSG
모드 (config)	ssr: true (universal)	ssr: fasle (spa)	target: ‘static’
서버 유/무	포함 (node.js 필요)	포함 (node.js 필요)
SEO	최적화	불가	최적화
빌드 생성 방식	npm run build	npm run build	npm run generate

• SSR (universal) 모드:
  • ssr: true 로 설정하면 ssr 모드로 동작
  • 페이지 첫 접근 시 SSR 렌더링 되고, 페이지 간 이동은 CSR 로 진행 된다.
  • SEO 최적화
• SPA 모드:
  • ssr: false 로 설정하면 spa 모드로 동작
  • CSR 로 렌더링
  • SEO 불가
• SSG 모드:
  • target: ‘server’ 로 설정 하면 런타임 때 요청에 맞춰 정적 html 렌더링
  • target: ‘static’ 으로 설정 하면 사용자가 요청 하기 전 빌드 시점에 미리 정적 html 만들어 렌더링
  • SEO 최적화
  • 동적 url 처리 등은 불가 하며 단순 정적 페이지 같은 경우에 적합
  • MPA + SSG 조합 hybrid 방식 개발 가능

Nuxt 도입을 고려해야 할 때 하나의 프레임워크로 SSR, SPA, SSG 선택 개발이 가능하다라고 접근해야지, 추후 모드만 변경한다고 해서 Nuxt 가 모든걸 알아서 SSR, SPA, SSG 빌드 처리를 완벽하게 지원 한다라고 생각하면 안된다. (단적인 예로 SSR 모드 기준으로 개발을 진행하다가 도중 SPA 모드로 변경 시 SSR에서만 사용되는 특정 라이프 사이클 메서드 부분에서 에러가 발생 될 수 있다.)