使用redux进行服务器端渲染

Question

I have a simple app built with reactjs and redux. As im just started learning redux i have some problems doing server side rendering.

What i have so far is... Client App.js rendering App component.

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

An App component:

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

Where both of items are containers SearchContainer is getting input from input box, firing an action that is dispatching a message with loaded todo`s (from remote rest service).

Now id like to load those todo`s on page load on server side and show them once page is shown. How would i do it? Is there some way to not use server side rendering and load items before page is actually displayed?

What ive come so far is routes.js file with:

  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

This is normally loading and app, but how do i push loaded data into TodoContainer? Should it be some way of dispatching a message or should i initialize App component with todos array as properties?

Answer 1

You do not need server side rendering.

The most common way to solve the issue you're facing is to load the data from componentDidMount . Until this data is returned, you need to display something, such as a spinner or throbber or a message or blank page. That's just the way it is. Your app won't be the only one with a loading indicator...

However, what you can also do, is fetch the data server-side, before you send the page down, and send it down with the page in a <script> tag and the help of JSON.stringify .

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

And then you can use this to initialize the store. This makes the data available immediately and removes the need for an API endpoint.

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

You could use this same data to render on the server as well, but it's not required by any means.

Finally I'd like to point out that you're rendering to document.body , which is a bad idea because a lot of browser extensions and plug-ins add a div or something else into the DOM for their own needs. React doesn't play well with those. It expects control over the element it's passed. It's better to just create a div and render into that instead.

Answer 2

Consider if you really need SSR in todo app. The main pros are improved SEO and that your app is ready a bit faster (it's already rendered). If it won't be very heavy you may want to skip that.

Is there some way to not use server side rendering and load items before page is actually displayed?

Yes, for example you can dispatch action that fetches data and pushes it into Redux state in componentWillMount . Until data is not there you can render null of some loading indicator.

Answer 3

Well, having gained some experience with react, redux, nodejs and some other client and server side techs here is what i found and how it works for me.

Server side rendering in react/redux app consist of several steps: 1. Loading data on server 2. Pushing data from server to client 3. Load data into redux storage

Here is a small example uploading translations for 'redux-polyglot' component.

routes.js [handles express server requests]:

//...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)
      });
}

A 'home' value here is handlebars template name which has:

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

Application`s responsibility then is to load data from 'phrases' script tag and set it as default language with polyglot provided functionality.

app.js

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

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

LoginContainer.js [sample container used from the App]

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

Where 'login' is the value loaded from phrases json on server: en.js

export default {
  login: "Login"
}