Getting started - Rabsztok/arboris GitHub Wiki

run yarn add arboris or npm install arboris, depending on package manager you use. Easy peasy.

Wrap your stores with track function, and mark these async actions, which should be awaited during pre-rendering phase. A rule of thumb is, that you should mark all of functions that could be ran on the node server, so user-activated actions don't need to be included there.

import { types, flow } from "mobx-state-tree"
import track from "arboris/lib/track"

const FooStore = types
  .model("PlayerStore", {
    // ...
  })
  .actions(() => {
    return {
      getContentFromAPI: flow(function* getContentFromAPI() {
        // ...
      }),
      getUserFromAPI: flow(function* getUserFromAPI() {
        // ...
      })
    }
  })

export default track(FooStore, {
  getContentFromAPI: track.async(),
  getUserFromAPI: track.async()
})

track.async() marks action as async function to be tracked. On the server side, Arboris will make sure that your rendered DOM will be sent to client only after those functions will be finished.

Next, add Arboris middleware to your store. It's very important to reinitialize your store each time you render site on server side to prevent leaking state between requests. If you are using Razzle, you can place that code in server.js file.

import { addMiddleware } from "mobx-state-tree"
import Arboris from "arboris"

const store = AppStore.create({})
const arboris = Arboris()
addMiddleware(store, arboris.middleware)

and replace your React render function with the one provided by Arboris:

const markup = await arboris.render(
  <Provider store={store}>
    <App />
  </Provider>
)

That's all. From now on, your app rendering function should await for all MST actions marked as track.async() and return DOM tree in content-filled ready state, just as you want it to be.