diff --git a/ko/hydration.md b/ko/hydration.md new file mode 100644 index 00000000..97fecf34 --- /dev/null +++ b/ko/hydration.md @@ -0,0 +1,27 @@ +# 클라이언트 사이드 하이드레이션 + +`entry-client.js`에서 단순히 아래 라인을 통해 애플리케이션을 마운트 합니다. + +```js +// this assumes App.vue template root element has `id="app"` +app.$mount('#app') +``` + +서버가 이미 마크업을 렌더링 했으므로, 이를 버리고 모든 DOM 요소를 다시 만들필요는 없습니다. 대신 정적 마크 업을 "수화 (hydrate)"하여 상호작용하게 만들고 싶습니다. + +서버에서 렌더링 한 결과를 검사하면 앱의 루트 엘리먼트에 특수 속성을 확인할 수 있습니다. + +```js +
+

특수 속성 data-server-rendered은 클라이언트 측 Vue가 마크업이 서버에 의해 렌더링 되고 하이드레이션 모드로 마운트되어야 한다고 알립니다.

+

개발 모드에서 Vue는 클라이언트 측에서 만들어진 가상 DOM 트리가 서버에서 렌더링된 DOM구조와 일치함을 나타냅니다. 일치하지 않는 부분이 있으면 하이드레이션을 중단하고 기존 DOM을 삭제한 후 처음부터 렌더링 합니다. 배포 모드에서는 최대 성능을 위해 assert를 하지 않습니다.

+

하이드레이션 주의 사항

+

SSR + 클라이언트 하이드레이션을 사용할 때 주의해야하는 것들 중 하나는 브라우저에서 변경할 수 있는 특수한 HTML 구조입니다. 예를 들어 Vue 템플릿을 다음과 같이 작성한 경우입니다.

+

+  
+
hi
+

브라우저는 자동으로 을 안에 자동으로 주입합니다. 하지만, Vue가 생성한 가상 DOM에 을 주입하면 불일치가 발생합니다. 그러므로 동일하도록 만들기 위해 템플릿에 유효한 HTML을 작성해야합니다. +
 +

+
+```