This is a fairly simply way to bootstrap react components into server side rendered pages.
The server template has a div with data-component
attribute who's value is the name of the component you want mounted. Each of the other data attributes are turned into properties for the component. It assumes the format is data-some-property-name
and it's converted into a somePropertyName
property.
For this to work, the component has to imported and assigned onto the global window
namespace. The mountReactComponent
function does an eval
of the data-component
name in order to create the React component.
If anything, this is the biggest weakness of this strategy. It requires poluting the global namespace with any of your top-level react components and also does a JS eval
of strings from the markup. This could potentially be dangerous.