Question

我成功配置了客户端和服务器。我可以使用预加载的数据生成html，但我对一般概念有疑问。此时，我需要找到一种方法来调用服务器来完成工作，当用户进入某个路径时。我何时以及如何做到这一点？在componentWillMount内？组件：<Route path="/wall" component={Wall}/>

class Wall extends Component {
  componentWillMount(){
   if (csr){
    const { pathname, search } = this.props.location;
    //to use Promise? something like that? it should trigger server to prepare html
    return fetch(`'${servername}/${pathname}${search}'`);        
   } 
   if (ssr){
    {{fetch data and prepare index.html}}
   }
  }
  componentDidUpdate(prevProps, prevState) {
     {{code}}
  }
  render() {
    return (...)
  }
  ...

General idea: user goes to /wall => client sends request to server to render it => server renders it and puts html into index.html => server responds to client with status 200 => client shows the page => updates are handled by client
我可能错了。如果我是，请纠正我。我将不胜感激任何帮助或任何其他解决方案。

编辑：我想只在第一次加载时使用SSR。后来CSR将负责休息。

Answer 1

通常服务器端渲染仅用于第一次渲染。在以下路线更改时，应用程序与单页应用程序的工作方式相同（即调用某些api，将其保存在某些状态并渲染它）。在这种情况下，调用服务器来呈现html将无法正常工作。

您现在可以使用的另一个选项，就像您调用服务器来呈现html一样，它只使用普通的html链接，而不是反应路由器，这基本上可以按照您的描述进行操作（调用服务器，获取html并渲染它）

Answer 2

您将需要一个自定义函数来获取数据并返回一个promise，以便您可以在完成数据提取后开始渲染，然后将呈现的HTML发送到客户端。 Here是

的基本想法

但通常为SSR反应应用程序构建自定义解决方案可能会非常痛苦。我建议使用NextJS（我使用它。它太棒了）或AfterJS。

不幸的是，NextJS不支持React Router 4.它有自己的路由机制，工作正常。但如果你是反应路由器4或反应路由器4的意识形态的粉丝，你可以去AfterJS

SSR与React.js（create-react-app，react-router v4，redux和sagas）

2 个答案: