reactjs - HTML markup does not change when the UI changes in isomorphic react web app -

i using react creating sample page has server side rendering using rendertostring() seo friendly pages.

this server.js code

app.get('*', (req, res) => {    match(      { routes, location: req.url },      (err, redirectlocation, renderprops) => {        // in case of error display error message        if (err) {          return res.status(500).send(err.message);        }        // generate react markup current route        let markup;        if (renderprops) {          markup = rendertostring(<routercontext{...renderprops}/>);        } else {           res.status(404);        }        // render index template embedded react markup        return res.render('index', { markup });      }    );  });

my page search page static , when user enters input fetches data backend , renders list of components in same page.

when see view page source in browser, can see initial static content, not html of list renders after backend response.

what right method updated html when component state changes.

you still need include component, , react itself, on clientside , call react.render on same base element in dom.

simply serving result of react.rendertostring static html that, serve static html.

if want component mounted on clientside can react clientside events , re-render state changes, you'll need mount on static html, done calling react.render on page load on clientside.

there's more here: https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/