Server-side rendering React applications with request resolver

express-middleware.js

async (req, res, next) => {
  const store = createStore()
  const context = {}
  const application = (
    <ReduxProvider store={store}>
      <StaticRouter location={req.url} context={context}>
        <Application />
      </StaticRouter>
    </ReduxProvider>
  )

  try {
    const markup = await resolveRequestPromises(() => renderToString(application))
    const { url, status } = context

    if (url) {
      res.redirect(302, url)
      return
    }

    if (status) {
      res.status(status)
    }

    res.send(renderDocument({
      state: store.getState(),
      children: markup,
    }))
  } catch (error) {
    next(error)
  }
}

MyComponent.js

componentWillMount() {
  registerRequestPromises(() => {
    const queries = createQueries(mapPropsToQueries, this.props)

    return this.dispatchQueries(queries)
  })
}

request-resolver.js

let pendingPromises
let resolving = false

export const registerRequestPromises = createRequestPromises => {
  if (resolving) {
    const promises = createRequestPromises()

    if (promises) {
      pendingPromises.push(...promises)
    }
  }
}

const performIteration = async (resolver, iterations, maxIterations) => {
  pendingPromises = []
  let result = resolver()

  if (iterations < maxIterations && pendingPromises.length > 0) {
    await Promise.all(pendingPromises)

    result = performIteration(resolver, iterations + 1, maxIterations)
  }

  return result
}

export const resolveRequestPromises = async (resolver, { maxIterations = 1 } = {}) => {
  resolving = true
  const result = await performIteration(resolver, 0, maxIterations)
  resolving = false

  return result
}