Question

我正在使用react来创建一个示例页面，该页面使用 renderToString（）进行服务器端渲染，以获取SEO友好页面。

这是我的server.js代码

＆＃13;

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 });
    }
  );
});

＆＃13;

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

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

在组件状态发生变化时获取更新HTML的正确方法是什么。

Answer 1

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

简单地将React.renderToString的结果作为静态HTML提供的确只会这样做，提供静态 html。

如果您希望组件在客户端正确安装，以便它可以响应客户端事件并重新呈现状态更改，则需要将其安装在静态html上，这可以通过调用{{1客户端上的页面加载。

此处有更多相关内容：https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/

Answer 2

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

当UI在同构反应web应用程序中发生更改时，HTML标记不会更改

2 个答案: