在同构react web应用中，当UI改变时，HTML标记不会改变

Question

我正在使用react创建一个示例页面，该页面使用renderToString()为SEO友好页面提供服务器端渲染。

是我的server.js代码

app.get('*', (req, res) => {
  match(
    { routes, location: req.url },
    (err, redirectLocation, renderProps) => {
      // in case of error display the error message
      if (err) {
        return res.status(500).send(err.message);
      }
      // generate the React markup for the current route
      let markup;
      if (renderProps) {
        markup = renderToString(<RouterContext{...renderProps}/>);
      } else { 
        res.status(404);
      }
      // render the index template with the embedded React markup
      return res.render('index', { markup });
    }
  );
});

我的页面是搜索页面，这是静态的最初，当用户输入输入，它从后端获取数据，并呈现在同一页面的组件列表。

当我在浏览器中看到view page source时，我只能看到初始的静态内容，而不是后端响应后呈现的html列表。

当组件状态发生变化时，获取更新后的HTML的正确方法是什么?

Answer 1

您仍然需要在客户端包含您的组件和React本身，并在DOM中相同的基本元素上调用React.render。

简单地将React.renderToString的结果作为静态HTML所做的，只会做到这一点，服务静态 HTML。

如果你想让你的组件正确地挂载在客户端，这样它就可以对客户端事件做出反应并重新呈现状态变化，你需要将它挂载在静态html上，这是通过在客户端页面加载时调用React.render来完成的。

这里有更多的信息:https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/

Answer 2

将获取的数据保存到您的状态，组件将重新呈现自己。这样，当从后端获取新内容时，视图将呈现新内容。