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

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 链接，而不是 react-router 链接，它基本上会做你描述的（调用服务器，获取 html 并渲染它）

Answer 2

您将需要一个获取数据的自定义函数和 returns 一个承诺，以便您可以在数据获取完成后开始呈现，然后将呈现的 HTML 发送给客户端。 Here 是一个基本思路

但通常为 SSR React 应用程序构建自定义解决方案可能会非常痛苦。我建议使用 NextJS (I am using it. It's awesome) or AfterJS.

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

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

SSR with React.js (create-react-app, react-router v4, redux and sagas)

reactjs

redux

server-side-rendering

redux-saga

create-react-app