具有純組件的服務器端React

Question

我正在嘗試構建一個遵循最佳實踐的同構React應用程序。 我目前僅在嘗試為服務器找到一個好的系統。 這是我的一些要求：

要求

• 我想使用react-router
• 我正在嘗試避免使用磁通量架構，因為對於我的簡單應用程序來說，這過於矯kill過正
• 我希望我的React組件是純組件，因此它們不應在內部狀態下存儲模型數據
• 反應的組分也不能獲取他們需要自己的數據，這個數據應該通過傳遞給他們props
• 如果組件需要異步加載數據，則應在渲染之前在服務器上進行

簡單樣品申請

我制作了一個示例應用程序，用來說明我的問題/困惑： https : //github.com/maximilianschmitt/ipman

基本上， 組件樹如下所示：

RouteHandler
  App
    RouteHandler
      Home
      Ip

routes.js

'use strict';

const Router = require('react-router');
const App = require('./components/app');
const Home = require('./components/home');
const Ip = require('./components/ip');
const Route = Router.Route;

const routes = (
  <Route handler={App}>
    <Route name="home" path="/" handler={Home} />
    <Route name="ip" path="/ip" handler={Ip} />
  </Route>
);

module.exports = routes;

組件/ip.js

class Ip extends React.Component {
  render() {
    return <div>Your ip is: {this.props.ip || 'undefined'}</div>;
  }
}

我的問題/任務是：

• 如果導航到/ip ，我希望服務器從http://ip.jsontest.com請求其自己的IP地址，以某種方式將其傳遞給Ip組件，然后將所有內容呈現為字符串，以供客戶端查看HTML。
• 我想避免在組件內部發出HTTP請求，而是通過props傳遞必要的信息

我知道alt.js之類的庫和其他同構的磁通量實現通過存儲的概念解決了這個問題，但是我想知道這是否有點過分。

是否有添加所需功能的簡單方法？

Answer 1

根據react-router的這篇文章，我得到了一些似乎不是很糟糕的解決方案。 您可以在這里找到結果： https : //github.com/maximilianschmitt/server-side-react