CMS에서 서버측 렌더링된 콘텐츠로 Vue.js에 하이드레이팅하는 방법?

CMS에서 서버측 렌더링된 콘텐츠로 Vue.js에 하이드레이팅하는 방법?

예를 들어, 다음과 같은 상황을 가정해 보자.

• WordPress 또는 TYPTO3과 같은 "classic" CMS를 통해 컨텐츠 관리
• 콘텐츠는 CMS에 의해 완전히 렌더링된 HTML 및 CSS로 전달된다.

Frontend Vue.js는 UI와의 모든 상호 작용에 사용해야 한다.

---

대부분의 Vue 문서와 Vue.js Server-Side Rendering Guide 및 Non-Node.js Environments의 Usage를 읽었지만, 이 작업을 수행하는 방법은 아직 확실하지 않다.

---

예^*

그 페이지는 기본적으로 제품 목록인 구성요소를 가지고 있다.JavaScript를 사용하는 모든 사람의 경우 이 목록은 맨 위에 필터를 가진다.

CMS에서 렌더링된 전체 목록을 얻는다.

<div class="product-component">
    <ul class="products">
        <li data-id="1">Product 1</li>
        <li data-id="2">Product 2</li>
        <li data-id="3">Product 3</li>
    </ul>
</div>

자바스크립트가 실행된 후 다음과 같이 표시되어야 한다.

<div id="product-component">
    <form>
        <select>
            <option value="1">Show Product 1 only</option>
        </select   
    </form>

    <ul class="products"></ul>
</div>

---

Vue.js의 구성요소는 다음과 같은 것일 수 있다.

<div id="product-component">
    <form>
        <!-- Vue.js logic for the filter -->
    </form>

    <ul class="products">
        <li v-for="product in products">
            {{ product.name }}
        </li>
    </ul>
</div>


var vm = new Vue({
  el: '#product-component',
  data: {
    products: [
        {id: 1, name: 'Product 1'},
        {id: 2, name: 'Product 2'},
        {id: 3, name: 'Product 3'},
    ],
    filterCurrent: null,
  }
});

---

이제 제 질문은:

• Vue.js를 사전 렌더링된 템플릿에 연결하는 방법?
• Vue.js 변수 업데이트/주입 방법(특히)data) 런타임에?
  • 즉, 다음을 의미한다.CMS에서 구성 요소로 제품 목록을 가져오는 방법
• 목록과 템플릿의 해당 부분이 이미 렌더링되었으므로 Vue.js가 초기화 후 다시 렌더링해야 하는가?
• 이것이 Vue.js의 라이프사이클에서 어떻게 표현되는가?

마지막이지만 중요한 것은:설정이 가능한가?

---

_{^* 그 코드는 그 문제를 설명하기 위한 단지 유사점일 뿐이다.}

당신이 당신 자신의 확장에 있는 한, JSON을 통해 데이터를 렌더링하는 것은 문제가 되지 않는다. Vue.js는 그것들을 가져와 프런트엔드 렌더링을 인수할 수 있다.

참조URL: https://stackoverflow.com/questions/46771818/how-to-hydrate-vue-js-with-server-side-rendered-content-from-cms