0

我正在使用 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 });
    }
  );
});

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

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

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

4

2 回答 2

0

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

简单地提供React.renderToString静态 HTML 的结果只会做到这一点，即提供静态html。

如果您希望您的组件在客户端正确安装，以便它可以对客户端事件做出反应并重新渲染状态更改，您需要将它安装在静态 html 上，这是通过调用React.render客户端的页面加载来完成的.

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

于 2016-11-08T09:52:42.713 回答
-1

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

于 2016-11-08T09:32:12.930 回答