서버 측에서 렌더링된 콘텐츠가 vue로 대체되는 이유

서버 측에서 렌더링된 콘텐츠가 vue로 대체되는 이유

vue의 마운트 지점이 다음과 같은 단순한 index.html 파일이 있습니다.

<div id="server-rendered-test" server-rendered="true">server</div>

보시다시피 서버가 템플릿을 렌더링한 것으로 가정합니다.main.js에는 vue를 마운트하기 위한 다음 코드가 있습니다.

const serverRenderedTest = new Vue({
  el: '#server-rendered-test',
  data: {
    text: 'client'
  },
  template: '<div id="server-rendered-test">{{ text }}</div>'
});

vue가 기존 DOM을 "hydraint"할 것으로 예상했지만, 최종 결과(vue 킥인 후)는 다음과 같기 때문에 그렇지 않습니다.

<div id="server-rendered-test">client</div>

제가 무엇을 빠뜨리고 있나요?

하이드레이션이란 Vue가 새로운 요소를 작성하는 대신 기존 서버 렌더링 요소를 사용하려고 한다는 것을 의미합니다(여기서 설명 참조).그래서 당신의 경우, 그것은 이미 렌더링된 것을 찾을 것입니다.div#server-rendered-test텍스트에 있는 텍스트를 새로운 데이터로 바꿉니다.

넌 아무것도 놓치고 있지 않아, 이건 예상된 행동이야

언급URL : https://stackoverflow.com/questions/42586666/why-is-the-server-side-rendered-content-replaced-by-vue