服务器端渲染与REDX

我有一个简单的应用程序与reactjs和REDX构建。因为我刚刚开始学习REDX我有一些问题做服务器端渲染。服务器端渲染与REDX

我到目前为止是... 客户端App.js呈现应用程序组件。

render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.body 
);

一个应用组件：

const App =() => (
    <div> 
    <SearchContainer /> 
    <TodoContainer /> 
    </div> 
)

当两个项目的是容器SearchContainer越来越输入从输入框，发射被分派与加载todo`s消息的动作（从远程服务休息）。

现在编号喜欢加载服务器端页面加载的待办事项，并显示页面后显示它们。我会怎么做？有没有一些方法可以在实际显示页面之前不使用服务器端渲染和加载项目？

什么香港专业教育学院走了这么远是routes.js文件：

const middleware = [ thunk ] 
    if (process.env.NODE_ENV !== 'production') { 
    middleware.push(createLogger()) 
    } 

    const store = createStore(reducer,applyMiddleware(...middleware)) 

    app.get('/', function(req, res) { 
    res.render('home',{ 
     markup: ReactDOMServer.renderToString(
     <Provider store={store}> 
      <App /> 
     </Provider> 
    ) 
    }); 
//Some code calling remote service goes here

这通常加载和应用程序，但我怎么推加载数据到TodoContainer？应该以某种方式发送消息，还是应该将todos数组作为属性初始化App组件？

来源

2016-11-20 ArkadyB

对于StackOverflow，此问题的答案太大/太长。网上有很多资源，包括官方文档。 http://redux.js.org/docs/recipes/ServerRendering.html。如果您开始实施解决方案并提出关于具体问题的问题，那将会更容易。 –

那么，在反应，redux，nodejs和其他一些客户端和服务器端技术方面积累了一些经验，这里是我发现的以及它对我的工作原理。

服务器端呈现在反应/ Redux的应用包括以下几个步骤：对服务器 1.加载数据 2.从服务器将数据推送到客户机 3.将数据装载到终极版存储

这里是一个小例子上传'redux-polyglot'组件的翻译。

routes.js [处理Express服务器请求]：

//...all of your imports goes here 
import en_phrases from './resources/phrases/en' 

app.get('/', async function(req, res) { 

    const store = createStore(reducers, applyMiddleware(...whatevermiddlewareyouneed)) 
    return res.render('home', { 
      markup: ReactDOMServer.renderToString(
       <Provider store={store}> 
       <App/> 
       </Provider> 
      ), 
      otherPreloadedStateThanPhrases: JSON.stringify(...anythingelse) 
      phrases: JSON.stringify(en_phrases) 
     }); 
}

一个 '家' 的价值在这里是具有车把模板名称：然后

<script type="application/json" id="phrases"> 
    {{{ phrases }}} 
</script>

Application`s的责任是在加载数据从“短语”脚本标记中将其设置为默认语言并使用多边形提供的功能。

app.js

const phrases = JSON.parse(document.getElementById('phrases').innerHTML); 

const store = createStore(reducers, otherPreloadedStateThanPhrases, applyMiddleware(...middleware)); 
store.dispatch(setLanguage('en', phrases));

LoginContainer.js [从App用于样品容器]

let LoginContainer = ({p}) => { 
    <span>{p.tc('login')}</span> 
} 
exports.LoginContainer = connect((state) =>()(translate(LoginContainer))

在哪里 '登录' 是从短语JSON装载在服务器的值： en.js

export default { 
    login: "Login" 
}

来源

2017-03-27 07:58:08 ArkadyB

请考虑您是否真的需要在待办事项应用中使用SSR。主要优点是改进了搜索引擎优化，并且你的应用程序已经准备好了一点（它已经呈现）。如果它不会很重，你可能想跳过它。

是否有某种方法可以在实际显示页面之前不使用服务器端渲染和加载项目？

是的，例如，您可以调度取数据并将其推入componentWillMount中的Redux状态的操作。在数据不存在的情况下，您可以渲染一些加载指示符。

来源

2016-11-20 21:22:22

嗯，这是一个问题。第一个屏幕似乎必须是ssr页面。否则，用户将看到一个空白页面。 – ArkadyB

是的，但仅限于提取数据的时间（不应超过一秒）。无论如何 - 如果你想在服务器上获取数据，唯一需要做的就是在发送渲染标记之前等待异步操作完成。看看这个：https：//github.com/reactjs/redux/issues/99。 –

您不需要服务器端渲染。

解决您遇到的问题的最常见方法是从componentDidMount加载数据。在返回此数据之前，您需要显示某些内容，例如微调器或短信或消息或空白页。就是那样子。您的应用程序不会是唯一一个带有加载指示器的程序...

但是，您还可以执行的操作是在发送页面之前取回数据服务器端，然后将其发送到与<script>标签中的页面以及JSON.stringify的帮助。

<script> 
    window.initialData = { 
    "myData": [ 1, 2, 3 ] 
    }; 
</script>

然后你可以用它来初始化商店。这使数据立即可用并且不需要API端点。

const store = createStore(reducer, window.initialData, applyMiddleware(...middleware));

你可以使用相同的数据呈现在服务器上为好，但它不以任何方式要求。

最后，我想指出你正在渲染到document.body，这是一个坏主意，因为很多浏览器扩展和插件会根据自己的需要在DOM中添加div或其他内容。React对这些玩法不太合适。它期望控制它传递的元素。最好是创建一个div并渲染。

来源

2016-11-21 11:05:40 DDS

服务器端渲染与REDX

回答

相关问题