What are the best practices for using React along with PHP templating engines (Blade, Twig)?

Question

PHP

Hello!
I would like some sage advice on using React inside a regular PHP template engine.
The classic React usage model assumes that it fully implements the frontend, receiving and passing data to the server via the API. That is, by implementing an MVC application in PHP, I can completely hang all "V" and even partially "C" on React. But what if there is no need for this and I want to use the power of the PHP framework to implement the routing and output of HTML content, and I want to use react only to create reactivity in separate sections and blocks of the application? For example, a product catalog with filters and other interface elements. Is it enough to just create a div#catalog and render react components into it? If yes, then what is the best way to implement it? And what about SEO in this case?
I would be grateful for advice and links.

Answer 1

There is experience with Vue in a similar situation, the essence is the same.
Somewhere in the templates, a container for the component is formed, in the attributes of which the props for the component are passed:

<div 
  data-component="ComponentName"
  data-component-props='{ "id": "123", "foo": "bar" }'
>
</div>

Somewhere in Component.js the component is initialized:

// псевдо-код
const el = получили элемент с data-component="ComponentName" или с каким-то id и т.д.
const props = спарсили пропсы из атрибута 
const app = отрендерили React-компонент в этом жлементе передав ему пропсы

With Vue, we previously tried to initialize the application directly on the body and use custom tags for components, but it turned out worse, it was inconvenient with props.
Of the well-known large sites, Lamoda, for example, does something similar. Look for the source code of the product page <div class="vue-widget">
With SEO, or not at all, or by filling the future container for the component with naked SEO text and then replacing it with the component's render. Most likely, you will use React for dynamic things - forms, constructors, cart, etc., which do not need SEO.
Based on the experience of using this approach on several medium-sized projects, I can say that the approach is working. Writing dynamic components in Vue is much more convenient. We wrote something like a sub-micro framework for convenient binding of vue and non-vue componentshttps://github.com/interfacesdev/nospa We use it internally, but I can’t recommend it for your production - the documentation is not finished, there is no support, they just pulled out the current version from the last project on github. Maybe someday my hands will get tighter.
But in general, it is much more convenient to write the front entirely in Vue / React, using, for example, Next / Nuxt for rendering, and all these crutches are essentially just out of hopelessness :( But this is a topic for a separate discussion.