Можно ли монтировать vue/react к элементам DOM?

Question

[KarakulovWebDev]

Хотелось бы иметь возможность использовать vue/react , но по ряду причин не подходит использование серверного рендеринга и полного клиентского рендеринга, ( бекенд должен отдавать по старинке обычную семантическую html разметку);
Будет ли более менее адекватно, монтировать vue.js к Dom элементам используя их в качестве шаблона;
Есть ли такая возможность в react? Если использовать то React или Vue.js

Answer 1

[Сергей delphinpro]

Есть такой грязный хак

<MyComponent :foo="bar">
  <div class="my-component">
    <h3>Разметка компонента, генерируемая сервером по старинке</h3>
  </div>
</MyComponent>

Сам компонент стандартно описан в vue файле. Разметка что внутри выведена, будет замещена рендером компонента.
Само собой тег MyComponent будет невалидным с точки зрения html, но зато и содержимое компонента будет отдано сервером. Ну и тот факт, что нужно делать двойную работу (дублирование шаблонов на клиенте и сервере), тоже печалит. Однако когда нет возможности/желания разворачивать полноценный SSR может быть приемлемым компромиссом.

Comments

[KarakulovWebDev]

Спасибо!Возьму прием на вооружение.

Answer 2

[markmariner]

Экземпляр Vue.js монтируется к любому элементу на странице, как указано в документации: https://ru.vuejs.org/v2/guide/index.html#%D0%94%D0...

Таких элементов может быть несколько на одной странице. Нет никаких ограничений в загрузке большого шаблона с сервера и привязке экземпляров Vue.js в скрипте только к тем элементам, в которых необходим клиентский рендеринг. Страница останется полностью валидна.

Answer 3

[Klein Maximus]

Vue с серверным рендерингом отдаёт "по старинке обычную семантическую html разметку".
https://ssr.vuejs.org/
https://nuxtjs.org/