material-ui + react-apollo ssr className mismatch

classnames_client

AppView-root-1
AppView-progress-2
AppHeader-root-3
AppHeader-toolbar-4
AppHeader-title-5
AppHeader-logo-6
AppHeader-nav-7
AppHeader-button-8
AppHeader-userIcon-9
AppHeader-scrolled-10
AppHeader-home-11
MuiAppBar-root-12
MuiAppBar-positionFixed-13
MuiAppBar-positionAbsolute-14
MuiAppBar-positionSticky-15
MuiAppBar-positionStatic-16
MuiAppBar-colorDefault-17
MuiAppBar-colorPrimary-18
MuiAppBar-colorSecondary-19
MuiPaper-root-20
MuiPaper-rounded-21
MuiPaper-elevation0-22
MuiPaper-elevation1-23
MuiPaper-elevation2-24
MuiPaper-elevation3-25
MuiPaper-elevation4-26
MuiPaper-elevation5-27
MuiPaper-elevation6-28
MuiPaper-elevation7-29
MuiPaper-elevation8-30
MuiPaper-elevation9-31
MuiPaper-elevation10-32
MuiPaper-elevation11-33
MuiPaper-elevation12-34
MuiPaper-elevation13-35
MuiPaper-elevation14-36
MuiPaper-elevation15-37
MuiPaper-elevation16-38
MuiPaper-elevation17-39
MuiPaper-elevation18-40
MuiPaper-elevation19-41
MuiPaper-elevation20-42
MuiPaper-elevation21-43
MuiPaper-elevation22-44
MuiPaper-elevation23-45
MuiPaper-elevation24-46
MuiToolbar-root-47
MuiToolbar-gutters-48
Connect-AppMenuIcon--button-49
Connect-AppMenuIcon--hide-50
IconButton-root-51
IconButton-small-52
IconButton-large-53
MuiIconButton-root-54
MuiIconButton-colorInherit-55
MuiIconButton-colorPrimary-56
MuiIconButton-colorSecondary-57
MuiIconButton-disabled-58
MuiIconButton-label-59
MuiButtonBase-root-60
MuiButtonBase-disabled-61
MuiButtonBase-focusVisible-62
MuiSvgIcon-root-63
MuiSvgIcon-colorPrimary-64
MuiSvgIcon-colorSecondary-65
MuiSvgIcon-colorAction-66
MuiSvgIcon-colorError-67
MuiSvgIcon-colorDisabled-68
MuiTouchRipple-root-69
MuiTouchRipple-ripple-70
MuiTouchRipple-rippleVisible-71
MuiTouchRipple-ripplePulsate-72
MuiTouchRipple-child-73
MuiTouchRipple-childLeaving-74
MuiTouchRipple-childPulsate-75
MuiTypography-root-76
MuiTypography-display4-77
MuiTypography-display3-78
MuiTypography-display2-79
MuiTypography-display1-80
MuiTypography-headline-81
MuiTypography-title-82
MuiTypography-subheading-83
MuiTypography-body2-84
MuiTypography-body1-85
MuiTypography-caption-86
MuiTypography-button-87
MuiTypography-alignLeft-88
MuiTypography-alignCenter-89
MuiTypography-alignRight-90
MuiTypography-alignJustify-91
MuiTypography-noWrap-92
MuiTypography-gutterBottom-93
MuiTypography-paragraph-94
MuiTypography-colorInherit-95
MuiTypography-colorPrimary-96
MuiTypography-colorSecondary-97
MuiTypography-colorTextSecondary-98
MuiTypography-colorError-99
MuiButton-root-100
MuiButton-label-101
MuiButton-flatPrimary-102
MuiButton-flatSecondary-103
MuiButton-outlined-104
MuiButton-colorInherit-105
MuiButton-raised-106
MuiButton-raisedPrimary-107
MuiButton-raisedSecondary-108
MuiButton-focusVisible-109
MuiButton-disabled-110
MuiButton-fab-111
MuiButton-mini-112
MuiButton-sizeSmall-113
MuiButton-sizeLarge-114
MuiButton-fullWidth-115
Connect-withHandlers-UserIcon---name-116
Connect-withHandlers-UserIcon---classNamePrefix-117
Connect-AppDrawer--root-118
Connect-AppDrawer--paper-119
Connect-AppDrawer--title-120
Connect-AppDrawer--titleVersion-121
Connect-AppDrawer--list-122
Connect-AppDrawer--itemText-123
MuiDrawer-docked-124
MuiDrawer-paper-125
MuiDrawer-paperAnchorLeft-126
MuiDrawer-paperAnchorRight-127
MuiDrawer-paperAnchorTop-128
MuiDrawer-paperAnchorBottom-129
MuiDrawer-paperAnchorDockedLeft-130
MuiDrawer-paperAnchorDockedTop-131
MuiDrawer-paperAnchorDockedRight-132
MuiDrawer-paperAnchorDockedBottom-133
MuiDrawer-modal-134
MuiModal-root-135
MuiModal-hidden-136

// mismatch starts here

AppContent-normal-137
AppContent-full-138
AppContent-fluid-139
AppContent-bottomToolbar-140
AppContentSpinner-spinner-141
AppContentSpinner-centered-142
Connect-AppSnackbar--close-143
MuiSnackbar-root-144
MuiSnackbar-anchorOriginTopCenter-145
MuiSnackbar-anchorOriginBottomCenter-146
MuiSnackbar-anchorOriginTopRight-147
MuiSnackbar-anchorOriginBottomRight-148
MuiSnackbar-anchorOriginTopLeft-149
MuiSnackbar-anchorOriginBottomLeft-150
Connect-AppDialog--content-151
MuiDialog-root-152
MuiDialog-paper-153
MuiDialog-paperWidthXs-154
MuiDialog-paperWidthSm-155
MuiDialog-paperWidthMd-156
MuiDialog-paperFullWidth-157
MuiDialog-paperFullScreen-158
HomeView-root-159
HomeView-hero-160
HomeView-heroContent-161
HomeView-heroText-162
HomeView-heroButton-163
HomeView-content-164
MuiGrid-container-165
MuiGrid-item-166
MuiGrid-zeroMinWidth-167
MuiGrid-direction-xs-column-168
MuiGrid-direction-xs-column-reverse-169
MuiGrid-direction-xs-row-reverse-170
MuiGrid-wrap-xs-nowrap-171
MuiGrid-wrap-xs-wrap-reverse-172
MuiGrid-align-items-xs-center-173
MuiGrid-align-items-xs-flex-start-174
MuiGrid-align-items-xs-flex-end-175
MuiGrid-align-items-xs-baseline-176
MuiGrid-align-content-xs-center-177
MuiGrid-align-content-xs-flex-start-178
MuiGrid-align-content-xs-flex-end-179
MuiGrid-align-content-xs-space-between-180
MuiGrid-align-content-xs-space-around-181
MuiGrid-justify-xs-center-182
MuiGrid-justify-xs-flex-end-183
MuiGrid-justify-xs-space-between-184
MuiGrid-justify-xs-space-around-185
MuiGrid-spacing-xs-8-186
MuiGrid-spacing-xs-16-187
MuiGrid-spacing-xs-24-188
MuiGrid-spacing-xs-32-189
MuiGrid-spacing-xs-40-190
MuiGrid-grid-xs-191
MuiGrid-grid-xs-1-192
MuiGrid-grid-xs-2-193
MuiGrid-grid-xs-3-194
MuiGrid-grid-xs-4-195
MuiGrid-grid-xs-5-196
MuiGrid-grid-xs-6-197
MuiGrid-grid-xs-7-198
MuiGrid-grid-xs-8-199
MuiGrid-grid-xs-9-200
MuiGrid-grid-xs-10-201
MuiGrid-grid-xs-11-202
MuiGrid-grid-xs-12-203
MuiGrid-grid-sm-204
MuiGrid-grid-sm-1-205
MuiGrid-grid-sm-2-206
MuiGrid-grid-sm-3-207
MuiGrid-grid-sm-4-208
MuiGrid-grid-sm-5-209
MuiGrid-grid-sm-6-210
MuiGrid-grid-sm-7-211
MuiGrid-grid-sm-8-212
MuiGrid-grid-sm-9-213
MuiGrid-grid-sm-10-214
MuiGrid-grid-sm-11-215
MuiGrid-grid-sm-12-216
MuiGrid-grid-md-217
MuiGrid-grid-md-1-218
MuiGrid-grid-md-2-219
MuiGrid-grid-md-3-220
MuiGrid-grid-md-4-221
MuiGrid-grid-md-5-222
MuiGrid-grid-md-6-223
MuiGrid-grid-md-7-224
MuiGrid-grid-md-8-225
MuiGrid-grid-md-9-226
MuiGrid-grid-md-10-227
MuiGrid-grid-md-11-228
MuiGrid-grid-md-12-229
MuiGrid-grid-lg-230
MuiGrid-grid-lg-1-231
MuiGrid-grid-lg-2-232
MuiGrid-grid-lg-3-233
MuiGrid-grid-lg-4-234
MuiGrid-grid-lg-5-235
MuiGrid-grid-lg-6-236
MuiGrid-grid-lg-7-237
MuiGrid-grid-lg-8-238
MuiGrid-grid-lg-9-239
MuiGrid-grid-lg-10-240
MuiGrid-grid-lg-11-241
MuiGrid-grid-lg-12-242
MuiGrid-grid-xl-243
MuiGrid-grid-xl-1-244
MuiGrid-grid-xl-2-245
MuiGrid-grid-xl-3-246
MuiGrid-grid-xl-4-247
MuiGrid-grid-xl-5-248
MuiGrid-grid-xl-6-249
MuiGrid-grid-xl-7-250
MuiGrid-grid-xl-8-251
MuiGrid-grid-xl-9-252
MuiGrid-grid-xl-10-253
MuiGrid-grid-xl-11-254
MuiGrid-grid-xl-12-255
Section-root-256
ResponsiveIframe-root-257
Ratio169-root-258

classnames_server

AppView-root-1
AppView-progress-2
AppHeader-root-3
AppHeader-toolbar-4
AppHeader-title-5
AppHeader-logo-6
AppHeader-nav-7
AppHeader-button-8
AppHeader-userIcon-9
AppHeader-scrolled-10
AppHeader-home-11
MuiAppBar-root-12
MuiAppBar-positionFixed-13
MuiAppBar-positionAbsolute-14
MuiAppBar-positionSticky-15
MuiAppBar-positionStatic-16
MuiAppBar-colorDefault-17
MuiAppBar-colorPrimary-18
MuiAppBar-colorSecondary-19
MuiPaper-root-20
MuiPaper-rounded-21
MuiPaper-elevation0-22
MuiPaper-elevation1-23
MuiPaper-elevation2-24
MuiPaper-elevation3-25
MuiPaper-elevation4-26
MuiPaper-elevation5-27
MuiPaper-elevation6-28
MuiPaper-elevation7-29
MuiPaper-elevation8-30
MuiPaper-elevation9-31
MuiPaper-elevation10-32
MuiPaper-elevation11-33
MuiPaper-elevation12-34
MuiPaper-elevation13-35
MuiPaper-elevation14-36
MuiPaper-elevation15-37
MuiPaper-elevation16-38
MuiPaper-elevation17-39
MuiPaper-elevation18-40
MuiPaper-elevation19-41
MuiPaper-elevation20-42
MuiPaper-elevation21-43
MuiPaper-elevation22-44
MuiPaper-elevation23-45
MuiPaper-elevation24-46
MuiToolbar-root-47
MuiToolbar-gutters-48
Connect-AppMenuIcon--button-49
Connect-AppMenuIcon--hide-50
IconButton-root-51
IconButton-small-52
IconButton-large-53
MuiIconButton-root-54
MuiIconButton-colorInherit-55
MuiIconButton-colorPrimary-56
MuiIconButton-colorSecondary-57
MuiIconButton-disabled-58
MuiIconButton-label-59
MuiButtonBase-root-60
MuiButtonBase-disabled-61
MuiButtonBase-focusVisible-62
MuiSvgIcon-root-63
MuiSvgIcon-colorPrimary-64
MuiSvgIcon-colorSecondary-65
MuiSvgIcon-colorAction-66
MuiSvgIcon-colorError-67
MuiSvgIcon-colorDisabled-68
MuiTouchRipple-root-69
MuiTouchRipple-ripple-70
MuiTouchRipple-rippleVisible-71
MuiTouchRipple-ripplePulsate-72
MuiTouchRipple-child-73
MuiTouchRipple-childLeaving-74
MuiTouchRipple-childPulsate-75
MuiTypography-root-76
MuiTypography-display4-77
MuiTypography-display3-78
MuiTypography-display2-79
MuiTypography-display1-80
MuiTypography-headline-81
MuiTypography-title-82
MuiTypography-subheading-83
MuiTypography-body2-84
MuiTypography-body1-85
MuiTypography-caption-86
MuiTypography-button-87
MuiTypography-alignLeft-88
MuiTypography-alignCenter-89
MuiTypography-alignRight-90
MuiTypography-alignJustify-91
MuiTypography-noWrap-92
MuiTypography-gutterBottom-93
MuiTypography-paragraph-94
MuiTypography-colorInherit-95
MuiTypography-colorPrimary-96
MuiTypography-colorSecondary-97
MuiTypography-colorTextSecondary-98
MuiTypography-colorError-99
MuiButton-root-100
MuiButton-label-101
MuiButton-flatPrimary-102
MuiButton-flatSecondary-103
MuiButton-outlined-104
MuiButton-colorInherit-105
MuiButton-raised-106
MuiButton-raisedPrimary-107
MuiButton-raisedSecondary-108
MuiButton-focusVisible-109
MuiButton-disabled-110
MuiButton-fab-111
MuiButton-mini-112
MuiButton-sizeSmall-113
MuiButton-sizeLarge-114
MuiButton-fullWidth-115
Connect-withHandlers-UserIcon---name-116
Connect-withHandlers-UserIcon---classNamePrefix-117
Connect-AppDrawer--root-118
Connect-AppDrawer--paper-119
Connect-AppDrawer--title-120
Connect-AppDrawer--titleVersion-121
Connect-AppDrawer--list-122
Connect-AppDrawer--itemText-123
MuiDrawer-docked-124
MuiDrawer-paper-125
MuiDrawer-paperAnchorLeft-126
MuiDrawer-paperAnchorRight-127
MuiDrawer-paperAnchorTop-128
MuiDrawer-paperAnchorBottom-129
MuiDrawer-paperAnchorDockedLeft-130
MuiDrawer-paperAnchorDockedTop-131
MuiDrawer-paperAnchorDockedRight-132
MuiDrawer-paperAnchorDockedBottom-133
MuiDrawer-modal-134
MuiModal-root-135
MuiModal-hidden-136

// mismatch starts here

HomeView-root-137
HomeView-hero-138
HomeView-heroContent-139
HomeView-heroText-140
HomeView-heroButton-141
HomeView-content-142
AppContent-normal-143
AppContent-full-144
AppContent-fluid-145
AppContent-bottomToolbar-146
MuiGrid-container-147
MuiGrid-item-148
MuiGrid-zeroMinWidth-149
MuiGrid-direction-xs-column-150
MuiGrid-direction-xs-column-reverse-151
MuiGrid-direction-xs-row-reverse-152
MuiGrid-wrap-xs-nowrap-153
MuiGrid-wrap-xs-wrap-reverse-154
MuiGrid-align-items-xs-center-155
MuiGrid-align-items-xs-flex-start-156
MuiGrid-align-items-xs-flex-end-157
MuiGrid-align-items-xs-baseline-158
MuiGrid-align-content-xs-center-159
MuiGrid-align-content-xs-flex-start-160
MuiGrid-align-content-xs-flex-end-161
MuiGrid-align-content-xs-space-between-162
MuiGrid-align-content-xs-space-around-163
MuiGrid-justify-xs-center-164
MuiGrid-justify-xs-flex-end-165
MuiGrid-justify-xs-space-between-166
MuiGrid-justify-xs-space-around-167
MuiGrid-spacing-xs-8-168
MuiGrid-spacing-xs-16-169
MuiGrid-spacing-xs-24-170
MuiGrid-spacing-xs-32-171
MuiGrid-spacing-xs-40-172
MuiGrid-grid-xs-173
MuiGrid-grid-xs-1-174
MuiGrid-grid-xs-2-175
MuiGrid-grid-xs-3-176
MuiGrid-grid-xs-4-177
MuiGrid-grid-xs-5-178
MuiGrid-grid-xs-6-179
MuiGrid-grid-xs-7-180
MuiGrid-grid-xs-8-181
MuiGrid-grid-xs-9-182
MuiGrid-grid-xs-10-183
MuiGrid-grid-xs-11-184
MuiGrid-grid-xs-12-185
MuiGrid-grid-sm-186
MuiGrid-grid-sm-1-187
MuiGrid-grid-sm-2-188
MuiGrid-grid-sm-3-189
MuiGrid-grid-sm-4-190
MuiGrid-grid-sm-5-191
MuiGrid-grid-sm-6-192
MuiGrid-grid-sm-7-193
MuiGrid-grid-sm-8-194
MuiGrid-grid-sm-9-195
MuiGrid-grid-sm-10-196
MuiGrid-grid-sm-11-197
MuiGrid-grid-sm-12-198
MuiGrid-grid-md-199
MuiGrid-grid-md-1-200
MuiGrid-grid-md-2-201
MuiGrid-grid-md-3-202
MuiGrid-grid-md-4-203
MuiGrid-grid-md-5-204
MuiGrid-grid-md-6-205
MuiGrid-grid-md-7-206
MuiGrid-grid-md-8-207
MuiGrid-grid-md-9-208
MuiGrid-grid-md-10-209
MuiGrid-grid-md-11-210
MuiGrid-grid-md-12-211
MuiGrid-grid-lg-212
MuiGrid-grid-lg-1-213
MuiGrid-grid-lg-2-214
MuiGrid-grid-lg-3-215
MuiGrid-grid-lg-4-216
MuiGrid-grid-lg-5-217
MuiGrid-grid-lg-6-218
MuiGrid-grid-lg-7-219
MuiGrid-grid-lg-8-220
MuiGrid-grid-lg-9-221
MuiGrid-grid-lg-10-222
MuiGrid-grid-lg-11-223
MuiGrid-grid-lg-12-224
MuiGrid-grid-xl-225
MuiGrid-grid-xl-1-226
MuiGrid-grid-xl-2-227
MuiGrid-grid-xl-3-228
MuiGrid-grid-xl-4-229
MuiGrid-grid-xl-5-230
MuiGrid-grid-xl-6-231
MuiGrid-grid-xl-7-232
MuiGrid-grid-xl-8-233
MuiGrid-grid-xl-9-234
MuiGrid-grid-xl-10-235
MuiGrid-grid-xl-11-236
MuiGrid-grid-xl-12-237
Section-root-238
ResponsiveIframe-root-239
Ratio169-root-240
Connect-AppSnackbar--close-241
MuiSnackbar-root-242
MuiSnackbar-anchorOriginTopCenter-243
MuiSnackbar-anchorOriginBottomCenter-244
MuiSnackbar-anchorOriginTopRight-245
MuiSnackbar-anchorOriginBottomRight-246
MuiSnackbar-anchorOriginTopLeft-247
MuiSnackbar-anchorOriginBottomLeft-248
Connect-AppDialog--content-249
MuiDialog-root-250
MuiDialog-paper-251
MuiDialog-paperWidthXs-252
MuiDialog-paperWidthSm-253
MuiDialog-paperWidthMd-254
MuiDialog-paperFullWidth-255
MuiDialog-paperFullScreen-256

client.js

// @flow

import React from 'react'
import { hot } from 'react-hot-loader'
import { Provider as ReduxProvider } from 'react-redux'
import { Router, Route } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo'
import { JssProvider, SheetsRegistry } from 'react-jss'
import { MuiThemeProvider } from '@material-ui/core/styles'

import client from 'apollo'
import { createJss } from 'styles/jss'
import { createTheme } from 'styles/theme'
import { createGenerateClassName } from 'styles/createGenerateClassName'
import { AppView } from 'app/view'

const sheetsRegistry = new SheetsRegistry()
const sheetsManager = new Map()
const generateClassName = createGenerateClassName()
const jss = createJss()
const theme = createTheme()

type Props = {
  store: any,
  history: any,
}

class Client extends React.Component<Props> {
  componentDidMount() {
    const jssStyles = document.getElementById('jss-server-side')
    console.log('remove', jssStyles)
    if (jssStyles && jssStyles.parentNode) {
      jssStyles.parentNode.removeChild(jssStyles)
    }
  }
  render() {
    return (
      <Router history={this.props.history}>
        <ReduxProvider store={this.props.store}>
          <ApolloProvider client={client}>
            <JssProvider registry={sheetsRegistry} jss={jss} generateClassName={generateClassName}>
              <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
                <Route path={'/:page?'} component={AppView} />
              </MuiThemeProvider>
            </JssProvider>
          </ApolloProvider>
        </ReduxProvider>
      </Router>
    )
  }
}

export default hot(module)(Client)

index.js

// @flow

import 'babel-polyfill'
import React from 'react'
import { render, hydrate } from 'react-dom'
import createHistory from 'history/createBrowserHistory'
import injectTapEventPlugin from 'react-tap-event-plugin'

import { createStore } from 'store'
import Client from 'client'

injectTapEventPlugin()

const store = createStore()
const history = createHistory()

const root = document.getElementById('climbuddy')
if (root) {
  if (process.env.NODE_ENV === 'production') {
    hydrate(<Client store={store} history={history} />, root)
  } else {
    render(<Client store={store} history={history} />, root)
  }
}

server.js

// @flow

import { readFileSync } from 'fs'
import { resolve } from 'path'

import Koa from 'koa'
import cookie from 'koa-cookie'
import logger from 'koa-logger'
import serve from 'koa-static'
import fetch from 'node-fetch'
import mount from 'koa-mount'
import { createProxyServer } from 'http-proxy'

import React from 'react'
import { renderToString } from 'react-dom/server'

import { Provider as ReduxProvider } from 'react-redux'
import { Route, StaticRouter as Router } from 'react-router'

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider, getDataFromTree } from 'react-apollo'

import JssProvider from 'react-jss/lib/JssProvider'
import { SheetsRegistry } from 'react-jss/lib/jss';
import { MuiThemeProvider } from '@material-ui/core/styles';

import config from 'config'
import { createStore } from 'store'
import { createJss } from 'styles/jss'
import { createTheme } from 'styles/theme'
import { createGenerateClassName } from 'styles/createGenerateClassName'

import { AppView } from 'app/view'

const templateFile = resolve(config.client.output.path, 'index.html')
const template = readFileSync(templateFile, 'utf-8')

const proxy = createProxyServer({
  target: `http://${config.api.host}:${config.api.port}`,
}).on('error', (err, req, res) => {
  console.log('==> Proxy error', err)
  res.end()
})

const pages = ['auth','graphql','static','uploads']
const isPage = (page) => page && pages.indexOf(page) > -1

const ssr = () => async (ctx) => {
  const page = ctx.path.split('/')[1]
  if (isPage(page)) {
    ctx.respond = false
    proxy.web(ctx.req, ctx.res)
  } else {
    try {
      const store = createStore()
      const client = new ApolloClient({
        ssrMode: true,
        link: createHttpLink({
          uri: 'http://localhost:4000/graphql',
          credentials: 'include',
          headers: {
            cookie: ctx.cookie,
          },
          fetch,
        }),
        cache: new InMemoryCache(),
      })
      
      const sheetsRegistry = new SheetsRegistry()
      const sheetsManager = new Map()
      const generateClassName = createGenerateClassName()
      const jss = createJss()
      const theme = createTheme()

      await getDataFromTree(
        <Router location={ctx.url} context={{}}>
          <ReduxProvider store={store}>
            <ApolloProvider client={client}>
              <JssProvider registry={sheetsRegistry} jss={jss} generateClassName={generateClassName}>
                <MuiThemeProvider disableStylesGeneration sheetsManager={sheetsManager} theme={theme}>
                  <Route path={'/:page?'} component={AppView} />
                </MuiThemeProvider>
              </JssProvider>
            </ApolloProvider>
          </ReduxProvider>
        </Router>
      )
      
      const sheetsRegistry2 = new SheetsRegistry()
      const sheetsManager2 = new Map()
      const generateClassName2 = createGenerateClassName()
      const jss2 = createJss()
      const theme2 = createTheme()

      const html = await renderToString(
        <Router location={ctx.url} context={{}}>
          <ReduxProvider store={store}>
            <ApolloProvider client={client}>
              <JssProvider registry={sheetsRegistry2} jss={jss2} generateClassName={generateClassName2}>
                <MuiThemeProvider sheetsManager={sheetsManager2} theme={theme2}>
                  <Route path={'/:page?'} component={AppView} />
                </MuiThemeProvider>
              </JssProvider>
            </ApolloProvider>
          </ReduxProvider>
        </Router>
      )
      const css = sheetsRegistry2.toString()
      const data = client.extract()

      const body = template.replace(
        `<div id="climbuddy"></div>`,
        `<div id="climbuddy">${html}</div>
        <style id="jss-server-side">${css}</style>
        <script>
        window.__APOLLO_STATE__=${JSON.stringify(data)}
        </script>
        `
      )

      ctx.status = 200
      ctx.body = body
      
    } catch (e) {
      ctx.status = 500
      ctx.body = `SSR ERROR: ${e.stack}`
    }
  }
}

const app = new Koa()
app.use(logger())
app.use(cookie())
app.use(mount('/public', serve(config.client.output.path)))
app.use(ssr())
app.listen(config.server.port)
console.log(`==> Climbuddy SSR running on http://${config.server.host}:${config.server.port}`)