Nuxt SSR

Compare SSR, CSR

• seo 때문에 ssr 하는거고 부가적인 효과로 프론트 사이드 부담을 서버사이드로 옮겨가는 것

Render Option

• 여러 서빙하는 녀석들 설정하고 header 추가 등도 가능

• compress 하거나 하튼 ssr 이라서 되는, 좋고 이상한 기능들 많다

AsyncData, Fetch

• spa 에서는 프론트에서만 돌고

• universial 에서는 둘다 도는데 접근 가능한 객체가 다르다 req 같은 경우 프론트에서 접근 안댐

SSR Error compatibility

Vue SSR vs Prerender

PHP서비스를 Vue로 리팩토링 하면서 발생한 SEO 문제를 해결하는 내용입니다. SSR과 Prerender를 고민하였고, 최종적으로 Prerender를 사용하였습니다. 2017년 10월 GDG 인천에서 발표한 내용입니다.

https://www.slideshare.net/wan2land/vue-ssr-vs-prerender

API: The render Property

Nuxt.js lets you customize runtime options for rendering pages Use this option to customize vue SSR bundle renderer. This option is skipped for spa mode. Learn more about available options on Vue SSR API Reference.

https://nuxtjs.org/api/configuration-render#static

window or document undefined

This is due to the server-side rendering. If you need to specify that you want to import a resource only on the client-side, you need to use the process.client variable. For example, in your .vue file:

https://nuxtjs.org/faq/window-document-undefined/

비동기 데이터

여러분은 때로는 store를 사용하지 않고 서버사이드에서 데이터를 가져오고 렌더링하고 싶을 수 있습니다. 이 때 pages 컴포넌트를 로딩하기 전에 매번 호출되는 asyncData를 사용하면 됩니다. 이 메소드는 (Nuxt 애플리케이션의 최초 로드 시) 서버 사이드에서 한 번 호출되고, 이후 라우트 이동 시 클라이언트 사이드에서 호출됩니다.

https://ko.nuxtjs.org/guide/async-data/