diff --git a/example/ssr-with-mobx/.gitignore b/example/ssr-with-mobx/.gitignore
new file mode 100644
index 00000000..bde43781
--- /dev/null
+++ b/example/ssr-with-mobx/.gitignore
@@ -0,0 +1,71 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+.DS_Store
+
+.vscode
+
+run/
+
+dist/
+
+package-lock.json
\ No newline at end of file
diff --git a/example/ssr-with-mobx/README.md b/example/ssr-with-mobx/README.md
new file mode 100755
index 00000000..98ee5268
--- /dev/null
+++ b/example/ssr-with-mobx/README.md
@@ -0,0 +1,33 @@
+# Egg + React + SSR应用骨架
+
+详细用法实现请查看[官方文档](http://ykfe.net)
+
+# Getting Start
+
+这里我们提供了一个脚手架来方便你创建项目
+
+```
+$ npm install yk-cli -g
+$ ykcli init <Your Project Name>
+$ cd <Your Project Name>
+$ npm i
+$ npm start
+$ open http://localhost:7001
+```
+
+# 功能/特性
+
+- [x] 基于cra脚手架开发，由cra开发的React App可无缝迁移，如果你熟悉cra的配置，上手成本几乎为0
+- [x] 小而美，相比于beidou，next.js这样的高度封装方案，我们的实现原理和开发模式一目了然
+- [x] 同时支持SSR以及CSR两种开发模式,本地开发环境以及线上环境皆可无缝切换两种渲染模式
+- [x] 统一前端路由与服务端路由，无需重复编写路由文件配置
+- [x] 支持切换路由时自动获取数据
+- [x] 支持本地开发HMR
+- [x] 稳定性经过线上大规模应用验证，可提供性能优化方案
+- [x] 支持tree shaking以及打包去重依赖，使得打包的bundle非常小，为同样复杂度的next.js项目的0.4倍
+- [x] 支持csr/ssr自定义layout，无需通过path来手动区分
+- [ ] 配套[TypeScript](https://github.com/ykfe/egg-react-ssr-typescript)版本的实现
+- [ ] 配套serverless版本的实现
+
+
+
diff --git a/example/ssr-with-mobx/app.js b/example/ssr-with-mobx/app.js
new file mode 100755
index 00000000..c9a76360
--- /dev/null
+++ b/example/ssr-with-mobx/app.js
@@ -0,0 +1,4 @@
+
+module.exports = app => {
+
+}
diff --git a/example/ssr-with-mobx/app/controller/page.js b/example/ssr-with-mobx/app/controller/page.js
new file mode 100644
index 00000000..b1ca1045
--- /dev/null
+++ b/example/ssr-with-mobx/app/controller/page.js
@@ -0,0 +1,20 @@
+
+const Controller = require('egg').Controller
+const { renderToStream } = require('ykfe-utils')
+
+class PageController extends Controller {
+  async index () {
+    const { ctx } = this
+    try {
+      // Page为webpack打包的chunkName，项目默认的entry为Page
+      ctx.type = 'text/html'
+      ctx.status = 200
+      const stream = await renderToStream(ctx, 'Page', ctx.app.config)
+      ctx.body = stream
+    } catch (error) {
+      ctx.logger.error(`Page Controller renderToStream Error ${error}`)
+    }
+  }
+}
+
+module.exports = PageController
diff --git a/example/ssr-with-mobx/app/router.js b/example/ssr-with-mobx/app/router.js
new file mode 100755
index 00000000..c8e325f1
--- /dev/null
+++ b/example/ssr-with-mobx/app/router.js
@@ -0,0 +1,8 @@
+'use strict'
+
+module.exports = app => {
+  const { router, controller } = app
+  app.config.routes.map(route => {
+    router.get(`${route.path}`, controller[route.controller][route.handler])
+  })
+}
diff --git a/example/ssr-with-mobx/build/env.js b/example/ssr-with-mobx/build/env.js
new file mode 100755
index 00000000..afe5d437
--- /dev/null
+++ b/example/ssr-with-mobx/build/env.js
@@ -0,0 +1,93 @@
+'use strict'
+
+const fs = require('fs')
+const path = require('path')
+const paths = require('./paths')
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')]
+
+const NODE_ENV = process.env.NODE_ENV
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  )
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv
+].filter(Boolean)
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile
+      })
+    )
+  }
+})
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd())
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter)
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i
+
+function getClientEnvironment (publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key]
+        return env
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl
+      }
+    )
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key])
+      return env
+    }, {})
+  }
+
+  return { raw, stringified }
+}
+
+module.exports = getClientEnvironment
diff --git a/example/ssr-with-mobx/build/jest/cssTransform.js b/example/ssr-with-mobx/build/jest/cssTransform.js
new file mode 100755
index 00000000..10a0a4c1
--- /dev/null
+++ b/example/ssr-with-mobx/build/jest/cssTransform.js
@@ -0,0 +1,14 @@
+'use strict'
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process () {
+    return 'module.exports = {};'
+  },
+  getCacheKey () {
+    // The output is always the same.
+    return 'cssTransform'
+  }
+}
diff --git a/example/ssr-with-mobx/build/jest/fileTransform.js b/example/ssr-with-mobx/build/jest/fileTransform.js
new file mode 100755
index 00000000..c0d0f075
--- /dev/null
+++ b/example/ssr-with-mobx/build/jest/fileTransform.js
@@ -0,0 +1,30 @@
+'use strict'
+
+const path = require('path')
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process (src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename))
+
+    if (filename.match(/\.svg$/)) {
+      return `module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: (props) => ({
+          $$typeof: Symbol.for('react.element'),
+          type: 'svg',
+          ref: null,
+          key: null,
+          props: Object.assign({}, props, {
+            children: ${assetFilename}
+          })
+        }),
+      };`
+    }
+
+    return `module.exports = ${assetFilename};`
+  }
+}
diff --git a/example/ssr-with-mobx/build/paths.js b/example/ssr-with-mobx/build/paths.js
new file mode 100755
index 00000000..5f5ff07d
--- /dev/null
+++ b/example/ssr-with-mobx/build/paths.js
@@ -0,0 +1,71 @@
+'use strict'
+
+const path = require('path')
+const fs = require('fs')
+const url = require('url')
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd())
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath)
+
+const envPublicUrl = process.env.PUBLIC_URL
+
+function ensureSlash (inputPath, needsSlash) {
+  const hasSlash = inputPath.endsWith('/')
+  if (hasSlash && !needsSlash) {
+    return inputPath.substr(0, inputPath.length - 1)
+  } else if (!hasSlash && needsSlash) {
+    return `${inputPath}/`
+  } else {
+    return inputPath
+  }
+}
+
+const getPublicUrl = appPackageJson =>
+  envPublicUrl || require(appPackageJson).homepage
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath (appPackageJson) {
+  const publicUrl = getPublicUrl(appPackageJson)
+  const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/')
+  return ensureSlash(servedUrl, true)
+}
+
+const moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx'
+]
+
+// config after eject: we're in ./config/
+module.exports = {
+  dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
+  appBuild: resolveApp('dist'),
+  appPublic: resolveApp('app/public'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('web'),
+  entry: resolveApp('web/entry'),
+  appNodeModules: resolveApp('node_modules'),
+  publicUrl: getPublicUrl(resolveApp('package.json')),
+  servedPath: getServedPath(resolveApp('package.json')),
+  template: resolveApp('web/index.html'),
+  resolveApp: resolveApp
+}
+
+module.exports.moduleFileExtensions = moduleFileExtensions
diff --git a/example/ssr-with-mobx/build/util.js b/example/ssr-with-mobx/build/util.js
new file mode 100644
index 00000000..cacf612b
--- /dev/null
+++ b/example/ssr-with-mobx/build/util.js
@@ -0,0 +1,46 @@
+const paths = require('./paths')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const publicPath = paths.servedPath
+const shouldUseRelativeAssetPaths = publicPath === './'
+const isDev = process.env.NODE_ENV === 'development'
+const getStyleLoaders = (cssOptions, preProcessor) => {
+  let loaders = [
+    {
+      loader: MiniCssExtractPlugin.loader,
+      options: Object.assign(
+        {},
+        shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
+      )
+    },
+    {
+      loader: require.resolve('css-loader'),
+      options: cssOptions
+    },
+    {
+      loader: require.resolve('postcss-loader'),
+      options: {
+        ident: 'postcss',
+        plugins: () => [
+          require('postcss-flexbugs-fixes'),
+          require('postcss-preset-env')({
+            autoprefixer: {
+              flexbox: 'no-2009'
+            },
+            stage: 3
+          })
+        ]
+      }
+    }
+  ]
+  if (isDev) {
+    loaders.unshift(require.resolve('css-hot-loader'))
+  }
+  if (preProcessor) {
+    // 添加额外的loader
+    loaders.push(require.resolve(preProcessor))
+  }
+  return loaders
+}
+module.exports = {
+  getStyleLoaders
+}
diff --git a/example/ssr-with-mobx/build/webpack.config.base.js b/example/ssr-with-mobx/build/webpack.config.base.js
new file mode 100755
index 00000000..4a3343f7
--- /dev/null
+++ b/example/ssr-with-mobx/build/webpack.config.base.js
@@ -0,0 +1,107 @@
+'use strict'
+
+const paths = require('./paths')
+const path = require('path')
+// style files regexes
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const getStyleLoaders = require('./util').getStyleLoaders
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
+
+let webpackModule = {
+  strictExportPresence: true,
+  rules: [
+    { parser: { requireEnsure: false } },
+    {
+      oneOf: [
+        {
+          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+          loader: require.resolve('url-loader'),
+          options: {
+            limit: 10000,
+            name: 'static/media/[name].[hash:8].[ext]'
+          }
+        },
+        {
+          test: /\.(js|mjs|jsx|ts|tsx)$/,
+          include: paths.appSrc,
+          loader: require.resolve('babel-loader'),
+          options: {
+            cacheDirectory: true,
+            cacheCompression: false,
+            presets: [
+              '@babel/preset-react'
+            ],
+            plugins: [
+              ['@babel/plugin-proposal-decorators', { 'legacy': true }],
+              ['@babel/plugin-proposal-class-properties', { 'loose': true }]
+            ]
+          }
+        },
+        {
+          test: /\.css$/,
+          exclude: /\.module\.css$/,
+          use: getStyleLoaders({
+            importLoaders: 1
+          })
+        },
+        {
+          test: /\.module\.css$/,
+          use: getStyleLoaders({
+            importLoaders: 1,
+            modules: true,
+            getLocalIdent: getCSSModuleLocalIdent
+          })
+        },
+        {
+          test: /\.less$/,
+          exclude: /\.module\.less$/,
+          use: getStyleLoaders(
+            {
+              importLoaders: 2,
+              localIdentName: '[local]'
+            },
+            'less-loader'
+          ),
+          sideEffects: true
+        },
+        {
+          test: /\.module\.less$/,
+          use: getStyleLoaders(
+            {
+              importLoaders: 2,
+              modules: true,
+              getLocalIdent: getCSSModuleLocalIdent
+            },
+            'less-loader'
+          )
+        },
+        {
+          exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+          loader: require.resolve('file-loader'),
+          options: {
+            name: 'static/media/[name].[hash:8].[ext]'
+          }
+        }
+      ]
+    }
+  ]
+}
+
+module.exports = {
+  mode: process.env.NODE_ENV,
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '../web')
+    },
+    extensions: paths.moduleFileExtensions
+      .map(ext => `.${ext}`)
+  },
+  module: webpackModule,
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'static/css/[name].css',
+      chunkFilename: 'static/css/[name].chunk.css'
+    })
+  ],
+  performance: false
+}
diff --git a/example/ssr-with-mobx/build/webpack.config.client.js b/example/ssr-with-mobx/build/webpack.config.client.js
new file mode 100644
index 00000000..17749446
--- /dev/null
+++ b/example/ssr-with-mobx/build/webpack.config.client.js
@@ -0,0 +1,132 @@
+'use strict'
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.config.base')
+const TerserPlugin = require('terser-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const paths = require('./paths')
+const ManifestPlugin = require('webpack-manifest-plugin')
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const safePostCssParser = require('postcss-safe-parser')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const publicPath = '/'
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
+const isDev = process.env.NODE_ENV === 'development'
+const devtool = isDev ? 'cheap-module-source-map' : (shouldUseSourceMap ? 'source-map' : false)
+const optimization = {
+  runtimeChunk: true,
+  splitChunks: {
+    chunks: 'all',
+    name: false,
+    cacheGroups: {
+      vendors: {
+        test: (module) => {
+          return module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.match('node_modules')
+        },
+        name: 'vendor'
+      }
+    }
+  }
+}
+if (!isDev) {
+  optimization.minimizer = [
+    new TerserPlugin({
+      terserOptions: {
+        parse: {
+          ecma: 8
+        },
+        compress: {
+          ecma: 5,
+          warnings: false,
+          comparisons: false,
+          inline: 2
+        },
+        mangle: {
+          safari10: true
+        },
+        output: {
+          ecma: 5,
+          comments: false,
+          ascii_only: true
+        }
+      },
+      // Use multi-process parallel running to improve the build speed
+      // Default number of concurrent runs: os.cpus().length - 1
+      parallel: true,
+      // Enable file caching
+      cache: true,
+      sourceMap: shouldUseSourceMap
+    }),
+    new OptimizeCSSAssetsPlugin({
+      cssProcessorOptions: {
+        parser: safePostCssParser,
+        map: shouldUseSourceMap
+          ? {
+            // `inline: false` forces the sourcemap to be output into a
+            // separate file
+            inline: false,
+            // `annotation: true` appends the sourceMappingURL to the end of
+            // the css file, helping the browser find the sourcemap
+            annotation: true
+          }
+          : false
+      }
+    })
+  ]
+}
+
+const plugins = [
+  new webpack.DefinePlugin({
+    __isBrowser__: true
+  }),
+  new ModuleNotFoundPlugin(paths.appPath),
+  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+  new ManifestPlugin({
+    fileName: 'asset-manifest.json',
+    publicPath: publicPath
+  }),
+  new HtmlWebpackPlugin({
+    template: paths.template
+  })
+]
+
+if (process.env.npm_config_report === 'true') {
+  plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = merge(baseConfig, {
+  devtool: devtool,
+  entry: {
+    Page: paths.entry
+  },
+  resolve: {
+    alias: {
+      // for this issue https://github.com/ykfe/egg-react-ssr/issues/36
+      'react-router': require.resolve('react-router')
+    }
+  },
+  output: {
+    path: paths.appBuild,
+    pathinfo: true,
+    filename: 'static/js/[name].js',
+    chunkFilename: 'static/js/[name].chunk.js',
+    publicPath: publicPath,
+    hotUpdateChunkFilename: '[hash].hot-update.js',
+    devtoolModuleFilenameTemplate: info =>
+      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
+  },
+  optimization: optimization,
+  plugins: plugins.filter(Boolean),
+  node: {
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  },
+  performance: false
+})
diff --git a/example/ssr-with-mobx/build/webpack.config.server.js b/example/ssr-with-mobx/build/webpack.config.server.js
new file mode 100755
index 00000000..01789b5f
--- /dev/null
+++ b/example/ssr-with-mobx/build/webpack.config.server.js
@@ -0,0 +1,29 @@
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.config.base')
+const nodeExternals = require('webpack-node-externals')
+const paths = require('./paths')
+const isDev = process.env.NODE_ENV === 'development'
+
+const plugins = [
+  new webpack.DefinePlugin({
+    __isBrowser__: false
+  })
+]
+module.exports = merge(baseConfig, {
+  devtool: isDev ? 'eval-source-map' : '',
+  entry: {
+    Page: paths.entry
+  },
+  target: 'node',
+  externals: nodeExternals({
+    whitelist: /\.(css|less|sass|scss)$/
+  }),
+  output: {
+    path: paths.appBuild,
+    publicPath: '/',
+    filename: '[name].server.js',
+    libraryTarget: 'commonjs2'
+  },
+  plugins: plugins
+})
diff --git a/example/ssr-with-mobx/config/config.daily.js b/example/ssr-with-mobx/config/config.daily.js
new file mode 100755
index 00000000..7acaac2b
--- /dev/null
+++ b/example/ssr-with-mobx/config/config.daily.js
@@ -0,0 +1,3 @@
+module.exports = {
+
+}
diff --git a/example/ssr-with-mobx/config/config.default.js b/example/ssr-with-mobx/config/config.default.js
new file mode 100755
index 00000000..53a684d6
--- /dev/null
+++ b/example/ssr-with-mobx/config/config.default.js
@@ -0,0 +1,37 @@
+const resolvePath = (path) => require('path').resolve(process.cwd(), path)
+
+module.exports = {
+  keys: 'eggssr',
+  type: 'ssr', // 指定运行类型可设置为csr切换为客户端渲染
+  static: {
+    prefix: '/',
+    dir: resolvePath('dist')
+  },
+  routes: [
+    {
+      path: '/',
+      exact: true,
+      Component: () => (require('@/page/index').default), // 这里使用一个function包裹为了让它延迟require
+      controller: 'page',
+      handler: 'index'
+    },
+    {
+      path: '/news/:id',
+      exact: true,
+      Component: () => (require('@/page/news').default),
+      controller: 'page',
+      handler: 'index'
+    }
+  ],
+  baseDir: resolvePath(''),
+  template: resolvePath('web/index.html'), // 使用的模版文件路径
+  injectCss: (chunkName) => ([
+    `<link rel='stylesheet' href='/static/css/${chunkName}.chunk.css' />`
+  ]), // 客户端需要加载的静态样式表
+  injectScript: (chunkName) => ([
+    `<script src='/static/js/runtime~${chunkName}.js'></script>`,
+    `<script src='/static/js/vendor.chunk.js'></script>`,
+    `<script src='/static/js/${chunkName}.chunk.js'></script>`
+  ]), // 客户端需要加载的静态资源文件表
+  serverJs: (chunkName) => resolvePath(`dist/${chunkName}.server.js`)
+}
diff --git a/example/ssr-with-mobx/config/config.local.js b/example/ssr-with-mobx/config/config.local.js
new file mode 100755
index 00000000..bdd5fe82
--- /dev/null
+++ b/example/ssr-with-mobx/config/config.local.js
@@ -0,0 +1,7 @@
+
+module.exports = {
+  proxy: {
+    host: 'http://127.0.0.1:8000', // 本地开发的时候代理前端打包出来的资源地址
+    match: /(\/static)|(\/sockjs-node)|(\/__webpack_dev_server__)|hot-update/
+  }
+}
diff --git a/example/ssr-with-mobx/config/config.prod.js b/example/ssr-with-mobx/config/config.prod.js
new file mode 100755
index 00000000..7acaac2b
--- /dev/null
+++ b/example/ssr-with-mobx/config/config.prod.js
@@ -0,0 +1,3 @@
+module.exports = {
+
+}
diff --git a/example/ssr-with-mobx/config/plugin.js b/example/ssr-with-mobx/config/plugin.js
new file mode 100755
index 00000000..7acaac2b
--- /dev/null
+++ b/example/ssr-with-mobx/config/plugin.js
@@ -0,0 +1,3 @@
+module.exports = {
+
+}
diff --git a/example/ssr-with-mobx/config/plugin.local.js b/example/ssr-with-mobx/config/plugin.local.js
new file mode 100644
index 00000000..48fc6ed6
--- /dev/null
+++ b/example/ssr-with-mobx/config/plugin.local.js
@@ -0,0 +1,6 @@
+module.exports = {
+  proxy: {
+    package: 'egg-proxy',
+    enable: true
+  }
+}
diff --git a/example/ssr-with-mobx/package.json b/example/ssr-with-mobx/package.json
new file mode 100755
index 00000000..2fcd57e3
--- /dev/null
+++ b/example/ssr-with-mobx/package.json
@@ -0,0 +1,75 @@
+{
+  "name": "egg-ssr",
+  "version": "1.1.3",
+  "dependencies": {
+    "egg": "^2.21.0",
+    "egg-bin": "^4.13.1",
+    "egg-proxy": "^1.1.0",
+    "egg-scripts": "^2.11.0",
+    "egg-static": "^2.2.0",
+    "koa-router": "^7.4.0",
+    "mobx-react": "^6.1.1",
+    "mobx-state-tree": "^3.14.0",
+    "react": "^16.8.3",
+    "react-dev-utils": "^8.0.0",
+    "react-dom": "^16.8.3",
+    "react-router-dom": "^5.0.0",
+    "ykfe-utils": "^1.1.0"
+  },
+  "scripts": {
+    "debug": "egg-bin debug",
+    "start": "rimraf dist && concurrently \"npm run ssr\" \" npm run csr \"",
+    "ssr": "concurrently \"egg-bin dev\" \"cross-env NODE_ENV=development webpack --watch --config ./build/webpack.config.server.js\"",
+    "csr": "cross-env NODE_ENV=development webpack-dev-server --port 8000 --hot --client-log-level error --config ./build/webpack.config.client.js",
+    "prod": "npm run build && eggctl start",
+    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.config.server.js",
+    "build": "rimraf dist && cross-env NODE_ENV=production webpack --config build/webpack.config.client.js && npm run build:server",
+    "analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "resolutions": {
+    "browserslist": "4.6.3",
+    "caniuse-lite": "1.0.30000974"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.4",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "@svgr/webpack": "2.4.1",
+    "babel-loader": "8.0.4",
+    "browserslist": "^4.6.3",
+    "caniuse-lite": "1.0.30000974",
+    "concurrently": "^4.1.0",
+    "cross-env": "^5.2.0",
+    "css-hot-loader": "^1.4.3",
+    "css-loader": "1.0.0",
+    "css-modules-require-hook": "^4.2.3",
+    "file-loader": "2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "optimize-css-assets-webpack-plugin": "5.0.1",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-preset-env": "^6.0.5",
+    "postcss-safe-parser": "4.0.1",
+    "rimraf": "^2.6.3",
+    "terser-webpack-plugin": "^1.2.0",
+    "url-loader": "1.1.1",
+    "webpack": "4.19.1",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.3.3",
+    "webpack-dev-server": "3.3.1",
+    "webpack-manifest-plugin": "^2.0.4",
+    "webpack-merge": "^4.1.4",
+    "webpack-node-externals": "^1.7.2"
+  }
+}
diff --git a/example/ssr-with-mobx/web/assets/common.less b/example/ssr-with-mobx/web/assets/common.less
new file mode 100755
index 00000000..b78da2a3
--- /dev/null
+++ b/example/ssr-with-mobx/web/assets/common.less
@@ -0,0 +1,13 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+ul {
+    list-style: none;
+}
\ No newline at end of file
diff --git a/example/ssr-with-mobx/web/entry.js b/example/ssr-with-mobx/web/entry.js
new file mode 100644
index 00000000..6f7d42ad
--- /dev/null
+++ b/example/ssr-with-mobx/web/entry.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter, StaticRouter, Route } from 'react-router-dom'
+import defaultLayout from '@/layout'
+import { getWrappedComponent, getComponent } from 'ykfe-utils'
+import { routes as Routes } from '../config/config.default'
+import { Provider, useStaticRendering } from 'mobx-react'
+import initStore from './store'
+
+const clientRender = async () => {
+  const store = initStore({
+    __isBrowser__: __isBrowser__,
+    initialState: window.__INITIAL_DATA__ || {}
+  })
+  // 客户端渲染||hydrate
+  ReactDOM[window.__USE_SSR__ ? 'hydrate' : 'render'](
+    <Provider store={store}>
+      <BrowserRouter>
+        {
+        // 使用高阶组件getWrappedComponent使得csr首次进入页面以及csr/ssr切换路由时调用getInitialProps
+          Routes.map(({ path, exact, Component }, key) => {
+            const ActiveComponent = Component()
+            const Layout = ActiveComponent.Layout || defaultLayout
+            return <Route exact={exact} key={key} path={path} render={() => {
+              const WrappedComponent = getWrappedComponent(ActiveComponent)
+              return <Layout><WrappedComponent store={store} /></Layout>
+            }} />
+          })
+        }
+      </BrowserRouter>
+
+    </Provider>
+    , document.getElementById('app'))
+
+  if (process.env.NODE_ENV === 'development' && module.hot) {
+    module.hot.accept()
+  }
+}
+
+const serverRender = async (ctx) => {
+  useStaticRendering(true)
+  const store = initStore({
+    __isBrowser__: __isBrowser__
+  })
+  ctx.store = store
+  // 服务端渲染 根据ctx.path获取请求的具体组件，调用getInitialProps并渲染
+  const ActiveComponent = getComponent(Routes, ctx.path)()
+  const serverData = ActiveComponent.getInitialProps ? await ActiveComponent.getInitialProps(ctx) : {}
+  const Layout = ActiveComponent.Layout || defaultLayout
+  ctx.serverData = store
+
+  return <Provider store={store}>
+    <StaticRouter location={ctx.req.url} context={serverData}>
+      <Layout>
+        <ActiveComponent {...serverData} />
+      </Layout>
+    </StaticRouter>
+  </Provider>
+}
+
+export default __isBrowser__ ? clientRender() : serverRender
diff --git a/example/ssr-with-mobx/web/index.html b/example/ssr-with-mobx/web/index.html
new file mode 100644
index 00000000..9693b55d
--- /dev/null
+++ b/example/ssr-with-mobx/web/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <title>React App</title>
+  <!-- Start Injecting Style Flows Up and Down -->
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="app">
+    <!-- Start Server Render Document -->
+  </div>
+  <!-- Start InitialData Script  -->
+  <!-- Start Client Script -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/example/ssr-with-mobx/web/layout/index.js b/example/ssr-with-mobx/web/layout/index.js
new file mode 100644
index 00000000..db7e6877
--- /dev/null
+++ b/example/ssr-with-mobx/web/layout/index.js
@@ -0,0 +1,12 @@
+
+import React from 'react'
+import '../assets/common.less'
+import './index.less'
+import { Link } from 'react-router-dom'
+
+const Layout = (props) => {
+  return (
+    <div className='normal'><h1 className='title'><Link to='/'>Egg + React + SSR</Link><div className='author'>by ykfe</div></h1>{props.children}</div>)
+}
+
+export default Layout
diff --git a/example/ssr-with-mobx/web/layout/index.less b/example/ssr-with-mobx/web/layout/index.less
new file mode 100644
index 00000000..8a95da09
--- /dev/null
+++ b/example/ssr-with-mobx/web/layout/index.less
@@ -0,0 +1,22 @@
+.normal {
+    font-family: Georgia, sans-serif;
+    text-align: center;
+}
+body {
+    background-color: #f2f3f5;
+}
+.title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 55px;
+    background-color: darkslateblue;
+    color: #fff;
+}
+.author {
+    position: absolute;
+    font-size: 15px;
+    bottom: 10px;
+    right: 100px;
+}
diff --git a/example/ssr-with-mobx/web/page/index/index.js b/example/ssr-with-mobx/web/page/index/index.js
new file mode 100644
index 00000000..deaa786a
--- /dev/null
+++ b/example/ssr-with-mobx/web/page/index/index.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import './index.less'
+import { inject, observer } from 'mobx-react'
+
+function Page (props) {
+  return (
+    <div className='normal'>
+      <div className='welcome' />
+      <ul className='list'>
+        {
+          props.news && props.news.map((item, index) => (
+            <li key={`news${index}`}>
+              <div>文章标题: {item.title}</div>
+              <div className='toDetail'><Link to={`/news/${item.id}`}>点击查看详情</Link></div>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+  )
+}
+
+Page.getInitialProps = async ({ store }) => {
+  await store.pageStore.getData()
+}
+
+const mapStateToProps = ({ store }) => ({
+  news: store.pageStore.news
+})
+
+export default inject(mapStateToProps)(observer(Page))
diff --git a/example/ssr-with-mobx/web/page/index/index.less b/example/ssr-with-mobx/web/page/index/index.less
new file mode 100644
index 00000000..d3104c00
--- /dev/null
+++ b/example/ssr-with-mobx/web/page/index/index.less
@@ -0,0 +1,19 @@
+.list {
+    background-color: #fff;
+    width: 1000px;
+    margin: 100px auto;
+    li {
+        display: flex;
+        justify-content: space-between;
+        background-color: #fff;
+        padding: 20px 30px 20px 80px;
+        border-bottom: 1px solid #eee;
+        position: relative;
+        line-height: 20px;
+        .toDetail a{
+            font-size: 14px;
+            color: #888
+        }
+    }
+}
+
diff --git a/example/ssr-with-mobx/web/page/news/index.js b/example/ssr-with-mobx/web/page/news/index.js
new file mode 100644
index 00000000..4173fb74
--- /dev/null
+++ b/example/ssr-with-mobx/web/page/news/index.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import Layout from './layout'
+import './index.less'
+import { inject, observer } from 'mobx-react'
+
+function News (props) {
+  return (
+    <div className='news-container' >
+      文章详情: {props.detail}
+    </div>
+  )
+}
+
+// 自定义Layout
+News.Layout = Layout
+
+News.getInitialProps = async (ctx) => {
+  const newsId = __isBrowser__ ? ctx.match.params.id : ctx.params.id
+  await ctx.store.newsStore.getData(newsId)
+}
+
+const mapStateToProps = ({ store }) => ({
+  detail: store.newsStore.detail
+})
+
+export default inject(mapStateToProps)(observer(News))
diff --git a/example/ssr-with-mobx/web/page/news/index.less b/example/ssr-with-mobx/web/page/news/index.less
new file mode 100644
index 00000000..d77837fa
--- /dev/null
+++ b/example/ssr-with-mobx/web/page/news/index.less
@@ -0,0 +1,9 @@
+.news-container {
+    width: 1000px;
+    background-color: #fff;
+    margin: 100px auto;
+    text-align: left;
+    line-height: 30px;
+    letter-spacing: 1px;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/example/ssr-with-mobx/web/page/news/layout.js b/example/ssr-with-mobx/web/page/news/layout.js
new file mode 100644
index 00000000..563ab05a
--- /dev/null
+++ b/example/ssr-with-mobx/web/page/news/layout.js
@@ -0,0 +1,12 @@
+
+import React from 'react'
+import '@/assets/common.less'
+import './layout.less'
+import { Link } from 'react-router-dom'
+
+const Layout = (props) => {
+  return (
+    <div className='normal'><h1 className='title'><Link to='/'>News Page</Link><div className='author'>by ykfe</div></h1>{props.children}</div>)
+}
+
+export default Layout
diff --git a/example/ssr-with-mobx/web/page/news/layout.less b/example/ssr-with-mobx/web/page/news/layout.less
new file mode 100644
index 00000000..bb423e66
--- /dev/null
+++ b/example/ssr-with-mobx/web/page/news/layout.less
@@ -0,0 +1,22 @@
+.normal {
+  font-family: Georgia, sans-serif;
+  text-align: center;
+}
+body {
+  background-color: #f2f3f5;
+}
+.title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 55px;
+  background-color: darkslateblue;
+  color: #fff;
+}
+.author {
+  position: absolute;
+  font-size: 15px;
+  bottom: 10px;
+  right: 100px;
+}
diff --git a/example/ssr-with-mobx/web/store/index.js b/example/ssr-with-mobx/web/store/index.js
new file mode 100644
index 00000000..7a642056
--- /dev/null
+++ b/example/ssr-with-mobx/web/store/index.js
@@ -0,0 +1,23 @@
+import PageStore from './page'
+import NewsStore from './news'
+
+class Store {
+  constructor (options) {
+    const { initialState } = options
+    this.pageStore = new PageStore(initialState)
+    this.newsStore = new NewsStore(initialState)
+  }
+}
+
+let store = null
+
+function initializeStore (options) {
+  const isServer = !options.__isBrowser__
+
+  if (isServer || store === null) {
+    store = new Store(options)
+  }
+
+  return store
+}
+export default initializeStore
diff --git a/example/ssr-with-mobx/web/store/news.js b/example/ssr-with-mobx/web/store/news.js
new file mode 100644
index 00000000..a472ac7d
--- /dev/null
+++ b/example/ssr-with-mobx/web/store/news.js
@@ -0,0 +1,30 @@
+import { action, observable, runInAction } from 'mobx'
+
+const mockData = {
+  '1': `Racket-on-Chez continues to improve. Snapshot builds are currently available at pre.racket-lang.org, and we expect that Racket-on-Chez will be included as a download option in the next release.`,
+  '2': `This means anyone with more than three devices connected doesn't have to worry right this instant. That will change, however, when it comes time to replace one of your current devices or if you add another device to your collection. At that point, you will have to make a decision.`,
+  '3': `World's most mysterious text is finally cracked: Bristol academic deciphers lost language of 600-year-old Voynich manuscript to reveal astrological sex tips, herbal remedies and other pagan beliefs`,
+  '4': `After a successful test in Mexico City, fast-food chain Burger King will begin delivering food to drivers caught in traffic in Los Angeles in what they have dubbed The Traffic Jam Whopper.`,
+  '5': `Product advertisement and promotion on YouTube is a function of the dedicated audience (or influence) of the individual (influencer) anchoring the advertising or promotion.`
+}
+const getData = async (id) => {
+  return Promise.resolve(mockData[id])
+}
+
+class NewsStore {
+    @observable detail = ''
+
+    constructor (state) {
+      this.detail = (state && state.newsStore.detail) || ''
+    }
+
+    @action
+    async getData (id) {
+      const detail = await getData(id)
+      runInAction(() => {
+        this.detail = detail
+      })
+    }
+}
+
+export default NewsStore
diff --git a/example/ssr-with-mobx/web/store/page.js b/example/ssr-with-mobx/web/store/page.js
new file mode 100644
index 00000000..573c6d8c
--- /dev/null
+++ b/example/ssr-with-mobx/web/store/page.js
@@ -0,0 +1,40 @@
+import { action, observable, runInAction } from 'mobx'
+
+const getData = async () => {
+  return Promise.resolve([
+    {
+      id: '1',
+      title: 'Racket v7.3 Release Notes'
+    },
+    {
+      id: '2',
+      title: 'Free Dropbox Accounts Now Only Sync to Three Devices'
+    },
+    { id: '3',
+      title: 'Voynich Manuscript Decoded by Bristol Academic'
+    },
+    { id: '4',
+      title: 'Burger King to Deliver Whoppers to LA Drivers Stuck in Traffic'
+    },
+    { id: '5',
+      title: 'How much do YouTube celebrities charge to advertise your product? '
+    }
+  ])
+}
+class PageStore {
+    @observable news = []
+
+    constructor (state) {
+      this.news = (state && state.pageStore.news) || []
+    }
+
+    @action
+    async getData () {
+      const news = await getData()
+      runInAction(() => {
+        this.news = news
+      })
+    }
+}
+
+export default PageStore
diff --git a/package.json b/package.json
index 562ef9d2..01146f89 100644
--- a/package.json
+++ b/package.json
@@ -46,10 +46,15 @@
   },
   "homepage": "https://github.com/ykfe/egg-react-ssr#readme",
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
     "babel-eslint": "^10.0.2",
     "lerna": "^3.8.0",
     "pre-commit": "^1.2.2",
     "standard": "^12.0.1",
     "vuepress": "^0.14.8"
+  },
+  "__npminstall_done": false,
+  "dependencies": {
+    "mobx": "^5.10.1"
   }
 }