Как сделать частичный SSR для vue совместно с php шаблонизатором?

Question

[Insayt]

Есть исходное приложение на php с шаблонизатором twig и фреймворком vue для реактивности.
Задача - сделать серверный рендеринг для vue компонентов которые помещены в twig шаблоны.

some-page.twig

<div>
   <div>Это статический текст который рендерит twig</div>
   <some-component /> // <-- Сюда я хочу на сервере отрендерить компонент vue 
</div>

Я сделал рядом с php проектом node-js сервер, который делает серверный рендеринг через https://vitejs.dev/guide/ssr
Но с этим есть проблемы, т.к. монтируется vue на всю страницу, и статический контент из примера выше он пытается обрабатывать как собственный темплейт - из за чего как я понял, вылетают ошибки гидрации.

Возможно ли как то делать серверный рендеринг только для конкретных мест с компонентами vue, а остальной шаблон оставлять статичным? Уже как только не мучал гугл с этим вопросом - ничего приличного не нашел.

По факту у меня компоненты vue - это динамические островки в статичном шаблоне. Мне всего лишь нужно получить из них разметку и гирдацию для SEO, и что бы не дублировать разметку компонента и в нем и в twig шаблоне

Answer 1

[nokimaro]

На PHP генерируете статичные HTML-файлы из twig-шаблонов через ->render()
Скармливаете эти html-файлы в SSR приложение при сборке

Comments

[Insayt]

так и делал) но проблема в том что все варианты SSR которые vue предлагает - подразумевает что у тебя изначально SPA, и ты хочешь его рендерить с сервера. Грубо говоря пустой index.html с одним div#app и в него монтируется vue приложение. А в вопросе как раз говорится про то что есть статичный шаблон, и в нем есть vue компоненты которые мы хотим отрендерить с сервера, оставив остальной шаблон статичным

[Insayt]

Тот вариант который вы предлагаете - упадет с ошибкой гидрации