带有 React.js 的 SSR（create-react-app、react-router v4、redux 和 sagas）答案

【问题标题】：SSR with React.js (create-react-app, react-router v4, redux and sagas)带有 React.js 的 SSR（create-react-app、react-router v4、redux 和 sagas）
【发布时间】：2018-06-15 13:22:06
【问题描述】：

我成功配置了客户端和服务器。我可以使用预加载的数据生成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会负责休息。

【问题讨论】：

我想你没有理解 React 本身的主要概念，或者这只是我的印象。使用像 React 这样的库有什么意义？关键是渲染界面更快，因为您从服务器请求小块数据而不是整个页面，否则只需使用普通的 html 和后端服务器。

标签： reactjs redux create-react-app redux-saga server-side-rendering

【解决方案1】：

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

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

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

【讨论】：

我认为AfterJS 对我来说是一个很好的解决方案。我将尝试将它与 redux 商店集成。谢谢你。附：最初我是 react-router v3 的粉丝，但后来我阅读了 v4 的文档，你知道当你尝试它时这一切都是有意义的。
是的。我完全同意 react router 4 的想法。 NextJS 将很快采用 RR4 或 RR4 的意识形态。
而且它不像 v4 更像是新模块。他们可以称之为 react-router-new 或 react-router-switch ;)

【解决方案2】：

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

您现在可以使用的另一个选项，当您调用服务器来呈现 html 时，它只是使用普通的 html 链接，而不是 react-router 链接，这基本上会按照您的描述进行（调用服务器，获取 html 并呈现它)

【讨论】：