title: Loading component data asynchronously server side with Mobx
body: <p>I'm having an issue figuring out how to have a react component have an initial state based on asynchronously fetched data.
  MyComponent fetches data from an API and sets its internal <code>data</code> property through a Mobx <code>action</code>.</p>
  
  <p>Client side, <code>componentDidMount</code> gets called and data is fetched then set and is properly rendered.</p>
  
  <pre><code>import React from 'react';
  import { observer } from 'mobx-react';
  import { observable, runInAction } from 'mobx';
  
  @observer
  export default class MyComponent extends React.Component {
       @observable data = [];
  
       async fetchData () {
           loadData()
             .then(results =&gt; {
                 runInAction( () =&gt; {
                     this.data = results;
                 });
             });
       }
  
       componentDidMount () {
           this.fetchData();
       }
  
       render () {
          // Render this.data
       }
  }
  </code></pre>
  
  <p>I understand that on the server, <code>componentDidMount</code> is not called.</p>
  
  <p>I have something like this for my server:</p>
  
  <pre><code>import React from 'react';
  import { renderToString } from 'react-dom/server';
  import { useStaticRendering } from 'mobx-react';
  import { match, RouterContext } from 'react-router';
  import { renderStatic } from 'glamor/server'
  import routes from './shared/routes';
  
  useStaticRendering(true);
  
  app.get('*', (req, res) =&gt; {
      match({ routes: routes, location: req.url }, (err, redirect, props) =&gt; {
          if (err) {
              console.log('Error', err);
              res.status(500).send(err);
          }
  
          else if (redirect) {
              res.redirect(302, redirect.pathname + redirect.search);
          }
  
          else if (props) {
              const { html, css, ids } = renderStatic(() =&gt; renderToString(&lt;RouterContext { ...props }/&gt;));
  
              res.render('../build/index', {
                  html,
                  css
              });
          }
  
          else {
              res.status(404).send('Not found');
          }
      })
  })
  </code></pre>
  
  <p>I have seen many posts where an initial store is computed and passed through a <code>Provider</code> component. My components are rendered, but their state is not initialized. I do not want to persist this data in a store and want it to be locally scope to a component. How can it be done ?</p>