如何在React / redux中进行服务器端渲染？

Question

我是新的反应/ redux我很少混淆反应/ redux中的服务器端rending，是的我在互联网上看到一些例子，但当我尝试使用外部服务器的模拟api时，服务器端渲染无法正常工作。

cat.js

import React from 'react';
import {render} from 'react-dom';
import {connect} from 'react-redux';
import * as mockApi from '../Actions/mockActions';
class Cat extends React.Component{
    componentWillMount(){
        this.props.getMockApi();
    }
    render(){
        return(
            <div>
                Hello Dude
                {this.props.mock.data.map((data,i) => {
                    return <li key={i}>{data.email}</li>
                })}
            </div>
        )
    }
}

const mapStateToProps = (state) => {

    return {
       mock:state.mock
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        getMockApi:() => dispatch(mockApi.getMockData())
    }
};


export default connect(mapStateToProps,mapDispatchToProps)(Cat);

mockActions.js

import axios from 'axios';
import * as types from './actionTypes';

export function getMockData() {
    return dispatch => {
        return axios.get('http://jsonplaceholder.typicode.com/users').then(response => {
            dispatch(setThisData(response.data))
        })
    }
}

export function setThisData(data) {

    return {
        type:types.MOCK_API,
        payload:data
    }
}

App.js

import React from 'react';
import {render} from 'react-dom';

import Cat from './components/cat'
import {Provider} from 'react-redux';
import configureStore from './Store/configureStore';
import { createStore ,applyMiddleware,compose} from 'redux';
import counterApp from './Reducers'
import thunk from 'redux-thunk';







if(typeof window !== 'undefined'){
    // Grab the state from a global variable injected into the server-generated HTML
    const preloadedState = window.__PRELOADED_STATE__

// Allow the passed state to be garbage-collected
    delete window.__PRELOADED_STATE__
    const store = createStore(counterApp, preloadedState, compose(applyMiddleware(thunk)))


    render(
        <Provider store={store} >
            <Cat/>
        </Provider>
        ,
        document.getElementById('app')
    )



}

devServer.js

import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware'
import webpackHotMidleware from 'webpack-hot-middleware';
import bodyParser from 'body-parser';
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux';
import counterApp from '../../src/client/ReduxServer/Reducers';
import App from '../../src/client/ReduxServer/components/cat';
import { renderToString } from 'react-dom/server'


import webpackConfig from '../../webpack.config.dev';


let app = express();
app.use(bodyParser.json());
app.use(express.static('public'))


const compiler = webpack(webpackConfig);

app.use(webpackMiddleware(compiler, {
    hot: true,
    publicPath: webpackConfig.output.publicPath,
    noInfo: true
}));

app.use(webpackHotMidleware(compiler));


// app.get('/*', (req, res) => {
//     res.sendFile(path.join(__dirname, '../../index.html'))
// });


//Redux Start
app.use(handleRender);

function handleRender(req,res) {
   const store = createStore(counterApp);

   const html = renderToString(
       <Provider store={store} >
           <App/>
       </Provider>
   )
    const preloadedState = store.getState();
    // Send the rendered page back to the client
    res.send(renderFullPage(html, preloadedState))
}
function renderFullPage(html, preloadedState) {
    console.log(preloadedState)
    return `
            <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
         <div id="app">${html}</div>
          <script>
           window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
        </script>

      <script src="bundle.js"></script>

      </body>
  </html>
        `
}







//Redux Ends








app.listen(3000, () => {
    console.log('Listening')
});

现在这只会服务器呈现你好伙计，但不是模拟Api调用数据。我知道错过了从服务器端获取数据，但重点是我将做什么如果我有渲染两个组件，该组件有5个api reuqest，以及如何确定正确的api请求

现在我的客户端Side Prefecthed状态将如下所示

 window.__PRELOADED_STATE__ = {"mock":{"data":[]}}

Answer 1

好的，为了清楚起见，您已经创建了处理服务器渲染的代码。 但是，它不会加载应该被提取的数据吗？

你已经迈出了第一步，太棒了！ 下一步是将实际动态数据加载到商店。 我们在这里看看这段代码

 function handleRender(req,res) { const store = createStore(counterApp); const html = renderToString( <Provider store={store} > <App/> </Provider> ) const preloadedState = store.getState(); // Send the rendered page back to the client res.send(renderFullPage(html, preloadedState)) }

发生了什么事，你创建了一个商店。 该商店用于将html呈现为字符串。 然后你得到商店状态并将其放入preloadedState。

很高兴接受renderToString 不会调用this.props.getMockApi（）; 正如你所料。

相反，您必须在调用renderToString（）之前获取状态;

在这种情况下，您可以做的如下。 （请注意，这只是一个示例，您可能希望在生产中使用更通用的东西，特别是如果您使用像react-router这样的东西。）

 import * as mockApi from '../Actions/mockActions'; function handleRender(req, res) { const store = createStore(counterApp); store.dispatch(mockApi.getMockData()) // And since you used redux-thunk, it should return a promise .then(() => { const html = renderToString( <Provider store={store}> <App/> </Provider> ) const preloadedState = store.getState(); // Send the rendered page back to the client res.send(renderFullPage(html, preloadedState)) }); }

简单不是吗？ ; D，不只是在开玩笑。 这是反应的一部分，但尚未确切解决问题。

就个人而言，如果我可以选择回到过去，我会告诉自己除了服务器渲染之外还要学习其他东西。 我还可以使用其他技术，如代码分割，延迟加载等。 使用服务器渲染，如果javascript在用户看到初始页面后很长时间到达，他们可能会对需要js的其他东西感到沮丧。 例如在我的情况下，一些链接不起作用，一些按钮不做任何事情，等等。

我不是说服务器渲染不好。 这是一个有趣的技术，只是有其他技术更有利于首先学习（哦，服务器渲染基本上锁定你使用nodejs为你的后端）。 祝你好运：）

如何在React / redux中进行服务器端渲染？

问题描述

1 个解决方案

解决方案1
4 已采纳 2017-03-24 18:54:53

如何在React / redux中进行服务器端渲染？

问题描述

1 个解决方案

解决方案1 4 已采纳 2017-03-24 18:54:53

解决方案1
4 已采纳 2017-03-24 18:54:53