In my leisure time I'm currenty building my first react app (page builder) and it should be easily scalable by user without using npm. It should work at runtime.
For that I would like to write a Component that has exchangeable markup, so when a user prefers to say this.state.text = "Hello World! should be inside a <p>{this.state.text}</p> instead of a <h1>{this.state.text}</h1>
He can change that without injecting the compiled (and minified) react code.
Currently I'm using the Fetch API to render the markup with PHP but on every state change it calls the server and that needs < 3 seconds every time, so no fast realtime rendering.
First question: Is there a way to use this sever side rendering approach without any delay or micro-delay?
I already read about Mustache and handlebars.js, therefore I need to write a runtime library to convert the props into mustache or handlebars to render it with dangerouslySetInnerHTML. But this is vulnerable.
Second question: I could escape the mustache or handlebar markup with PHP before it outputs, but I don't know if this is save enough?
Third question: Besides, is there a huge performance break to use dangerouslySetInnerHTML?
The best approach I could find so far was react-templates by WIX, but it needs npm.
Fourth question: Do you know any other/better approach to achieve my goal of exchangable markup?