ajax - Mobxを使用してコンポーネントデータをサーバー側で非同期にロードする

Question

非同期にフェッチされたデータに基づいて、反応コンポーネントに初期状態を持たせる方法を理解するのに問題があります。MyComponent は API からデータを取得dataし、 Mobx を介して内部プロパティを設定しますaction。

クライアント側componentDidMountが呼び出され、データがフェッチされてから設定され、適切にレンダリングされます。

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 => {
               runInAction( () => {
                   this.data = results;
               });
           });
     }

     componentDidMount () {
         this.fetchData();
     }

     render () {
        // Render this.data
     }
}

componentDidMountサーバー上でが呼び出されていないことを理解しています。

サーバーには次のようなものがあります。

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) => {
    match({ routes: routes, location: req.url }, (err, redirect, props) => {
        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(() => renderToString(<RouterContext { ...props }/>));

            res.render('../build/index', {
                html,
                css
            });
        }

        else {
            res.status(404).send('Not found');
        }
    })
})

Provider初期ストアが計算され、コンポーネントを通過する多くの投稿を見てきました。コンポーネントがレンダリングされますが、その状態が初期化されていません。このデータをストアに保存したくはなく、コンポーネントに対してローカル スコープにしたいと考えています。どうすればできますか？