[Nuxt.js] 공식문서 번역하기 (Server Side Rendering)

---

웹페이지를 브라우저가 아닌 서버에서 보여지게 하는 방법이다.

서버는 완전히 렌더된 페이지를 클라이언트에게 보낸다.

클라이언트의 자바스크립트 번들은 vue.js 앱을 하이드레이트 하게 해준다.

 

이를 prerendered와 hydrate라고 하는데, prerendered는 서버사이드에서 seo를 위해 미리 보여줄 부분을 렌더링 하는 것이고, hydrate는 이후에 자바스크립트 파일들로 필요한 부분을 클라이언트에서 렌더링 하는 것이다(추가 설명).

 

Node.js 서버 필요

 

자바스크립트 환경은 웹페이지를 렌더링 하기 위해 필요합니다.

Node.js 서버는 vue.js 앱을 실행하기 위해 구성됩니다.

 

서버의 실행과 관리

 

서버는 serverMiddleware를 통해 실행할 수 있고 middleware를 통해 라우트를 컨트롤 할 수 있습니다.

서버 middleware가 path로 맵핑된 함수 리스트라면 아래와 같이 사용합니다.

export default {
serverMiddleware: ['~/server-middleware/logger']

}

 

서버 vs 브라우저 환경

 

Node.js 환경에 있기 때문에 당신은 node.js를 req와 res와 같은 객체로 접근할 수 있습니다.

브라우저 환경에 속한 것 같이 window나 document 객체로 접근할 필요가 없습니다. 그렇지만 beforeMount나 mounted 훅으로 window나 document를 사용할 수 있습니다.

 

Nuxt.js로 진행하는 서버사이드 렌더링 순서

 

1.    브라우저에서 서버로

 

브라우저가 처음 요청을 보낼 때, node.js 내부 서버를 호출합니다. Nuxt.js는 html를 생성하고 asyncData, nuxtServerInit 혹은 fetch와 같은 실행된 함수들의 결과와 함 께 브라우저에 다시 보내줄 것 입니다.

 

2.    서버에서 브라우저로

 

브라우저는 서버를 통해 생성된 HTML과 함께 렌더된 페이지를 받습니다. 콘텐츠는 보여지고 vue.js 하이드레이션이 시작되고 반응적이게 만듭니다. 이 과정이 끝난 후에 페이지는 인터렉티브 해 집니다.

 

3.    브라우저에서 브라우저로

 

<NuxtLink /> 를 통한 페이지 사이의 네비게이팅은 클라이언트 사이드에서 끝나기 때문에 브라우저를 강제로 리프레시 하지 않는다면 서버를 다시 호출 할 필요가 없습니다.

 

---

Caveats

Window or document undefined

 

이것은 서버사이드 렌더링 때문입니다. 만약 특정하게 클라이언트쪽에만 리소스를 임포트 하고 싶다면, process.client 변수를 사용해야 합니다.

만약에 .vue 파일에서,

if (process.client) {
require('external_library')
}

처럼 사용합니다.

 

 

Ios and phone numbers

 

몇몇 모바일 사파리 버전은 전화번호를 링크에 자동으로 transform시킬겁니다. 이것은 ssr 콘텐츠로서 웹사이트 콘텐츠와 맞지 않는다는NodeMismatch 경고를 불러일으킬 것입니다.

 

Nuxt 페이지에 휴대전화 번호를 포함시키고 싶다면 두가지 옵션이 있습니다.

 

1.    Transformation을 중지시키는 메타태그 사용하기

<meta name="format-detection" content="telephone=no" />

 

2.    Link 내부에 휴대전화 번호를 감싸기

<!-- Example phone number: +7 (982) 536-50-77 -->

<template>
	<a href="tel: +7 (982) 536-50-77">+7 (982) 536-50-77</a>
</template>

 

---

Static Site Generation

 

정적 사이트 생성으로 앱을 빌드 단계에서 렌더할 수 있고 넷리파이, 깃헙페이지, 바셀과 같은 정적 호스팅 서비스에 디플로이 할 수 있습니다. 이것은, 앱 디플로이를 위해 어떠한 서버도 필요하지 않음을 의미합니다.

 

사이트 생성하기

Target:static 으로 사이트를 디플로이 할 때, 모든 .vue 페이지들은 html과 js파일로 생성 될 것 입니다. 모든 api 호출이 생성된 콘텐츠 내의 static 폴더에서 캐싱되고 이루어질텐데 때문에 클라이언트 쪽 네비게이션에는 api 호출이 불필요합니다.

 

1.    브라우저에서 cdn으로

 

브라우저가 처음 요청을 보냈을 때, CDN을 실행시킬 것 입니다.

 

2.    Cdn에서 브라우저로

 

Cdn은 이미 생성 된 html, 자바스크립트 그리고 static assets를 브라우저로 다시 보낼 것 입니다. 콘텐츠가 보여지고 vue.js 하이드레이션이 시작되고 반응적으로 만들 것 입니다. 이 과정 후에, 페이지는 인터랙티브 해 집니다.

 

3.    브라우저에서 브라우저로

 

<NuxtLink /> 를 통한 페이지 사이의 네비게이팅은 클라이언트 사이드에서 끝나기 때문에 브라우저를 강제로 리프레시 하지 않는다면 서버를 다시 호출 할 필요가 없습니다.

 

Spa fallback

 

Generate.exclude로 생성에 제외된 페이지들은 spa가 되기 위해 폴백 될 것이다. 이 페이지들은 그러므로 cdn에 없고, 사용자가 해당 페이지에 네비게이트 할 때에만 렌더 될 것이다.

 

콘텐츠 업데이팅 하기

 

Api로 사이트에 새로운 콘텐츠를 얻으려면 사이트를 재생성 해야 합니다. 대부분의 정적 사이트 호스팅 제공원들로 깃 커맨드나 풀 리퀘스트로 마스터브랜치에 변경을 푸싱하는 것 으로 할 수 있습니다.