I have a react app which is rendered on the client side. Now I have a component which I want to render on the server side. I am doing this because the component will construct its layout from a json and I do not want to parse the json once on the server and again on the client to render the component.
Right now, I am doing renderToString(<Component/>) and sending it to the client. The client then does ReactDOM.hydrate(component,document.getElementById('someDivId')). But it only renders the component as a string. It is not rendering it as an element. The container on which I am trying to render the component is a client-side rendered react app.
Example code as below
server.js
app.get('/component/:id',(req,res,next)=>{
const markup = renderToString(
<div>Hello</div>
)
let jsonModel = {
markup
}
return res.json(jsonModel);
})
client.js
getComponent(id).then(data => {
ReactDOM.hydrate(data.markup, document.getElementById('someDivId'));
});
Is it possible to render only one component on the server side? Or do I have to render the whole app on the server side?