diff --git a/packages/rax-cli/src/generator/app/_package.json b/packages/rax-cli/src/generator/app/_package.json
index 3ab3a92ae4..b0e6fdb161 100755
--- a/packages/rax-cli/src/generator/app/_package.json
+++ b/packages/rax-cli/src/generator/app/_package.json
@@ -12,6 +12,9 @@
     "driver-universal": "^1.0.1",
     "history": "^4.9.0",
     "rax": "^1.0.8",
+    <%_ if (projectTargets.includes('web')) { -%>
+    "rax-pwa": "^1.0.2",
+    <%_ } -%>
     "rax-view": "^1.0.0",
     "rax-text": "^1.0.0",
     "universal-app-runtime": "^0.1.3"
diff --git a/packages/rax-cli/src/generator/app/build.json b/packages/rax-cli/src/generator/app/build.json
index 25c43d4bb8..a32cf2d9f5 100755
--- a/packages/rax-cli/src/generator/app/build.json
+++ b/packages/rax-cli/src/generator/app/build.json
@@ -1,5 +1,8 @@
 <%_ const isSSR = projectFeatures.includes('ssr') -%>
 {
+  <%_ if (isSSR) { -%>
+  "inlineStyle": true,
+  <%_ } -%>
   "plugins": [
     ["rax-plugin-app", { "targets": ["<%- projectTargets.join('", "') %>"]}]<%_ if (isSSR) { -%>,<%_ } %>
     <%_ if (isSSR) { -%>
diff --git a/packages/rax-cli/src/generator/app/src/app.json b/packages/rax-cli/src/generator/app/src/app.json
index 03c99373ad..1aa7fdd395 100755
--- a/packages/rax-cli/src/generator/app/src/app.json
+++ b/packages/rax-cli/src/generator/app/src/app.json
@@ -1,3 +1,4 @@
+<%_ const isSSR = projectFeatures.includes('ssr') -%>
 {
   "routes": [
     {
@@ -9,6 +10,9 @@
       "component": "pages/about"
     }
   ],
+  <%_ if (isSSR) { -%>
+  "historyType": "browser",
+  <%_ } -%>
   "window": {
     "defaultTitle": "Rax App 1.0"
   }
diff --git a/packages/rax-cli/src/generator/app/src/document/index.jsx b/packages/rax-cli/src/generator/app/src/document/index.jsx
index c6cc5e18f0..0fec3ed6f3 100755
--- a/packages/rax-cli/src/generator/app/src/document/index.jsx
+++ b/packages/rax-cli/src/generator/app/src/document/index.jsx
@@ -14,14 +14,13 @@ function Document(props) {
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no" />
         <title>WebApp</title>
-        <link href={`${publicPath}web/index.css`} rel="stylesheet" />
       </head>
       <body>
         {/* root container */}
         <div id="root" dangerouslySetInnerHTML={{ __html: initialHtml || '' }} />
-        <script src={`${publicPath}web/index.js`} />
         {/* initial data from server side */}
-        <script data-from="server" type="application/json" dangerouslySetInnerHTML={{__html: initialData}} />
+        <script data-from="server" dangerouslySetInnerHTML={{__html: 'window.__INITIAL_DATA__=' + initialData}} />
+        <script src={`${publicPath}web/index.js`} />
       </body>
     </html>
   );
@@ -36,7 +35,6 @@ function Document(props) {
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no" />
         <title>WebApp</title>
-        <link href={`${publicPath}web/index.css`} rel="stylesheet" />
       </head>
       <body>
         {/* root container */}
diff --git a/packages/rax-plugin-app/src/config/web/getBase.js b/packages/rax-plugin-app/src/config/web/getBase.js
index 051cbc3bac..9eff32ffbb 100644
--- a/packages/rax-plugin-app/src/config/web/getBase.js
+++ b/packages/rax-plugin-app/src/config/web/getBase.js
@@ -1,4 +1,5 @@
 'use strict';
+const path = require('path');
 const webpack = require('webpack');
 const serverRender = require('rax-server-renderer');
 const babelMerge = require('babel-merge');
@@ -16,7 +17,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const getWebpackBase = require('../getWebpackBase');
 
 module.exports = (context) => {
-  const { rootDir } = context;
+  const { rootDir, userConfig } = context;
 
   const config = getWebpackBase(context);
 
@@ -27,28 +28,20 @@ module.exports = (context) => {
     .set('@core/page', 'universal-app-runtime')
     .set('@core/router', 'universal-app-runtime');
 
-  config.module.rule('jsx')
-    .test(/\.(js|mjs|jsx)$/)
-    .exclude
-      .add(/(node_modules|bower_components)/)
-      .end()
-    .use('babel')
-      .loader(require.resolve('babel-loader'))
-      .options(babelConfigWeb);
-
-  config.module.rule('tsx')
-    .test(/\.tsx?$/)
-    .exclude
-      .add(/(node_modules|bower_components)/)
-      .end()
-    .use('babel')
-      .loader(require.resolve('babel-loader'))
-      .options(babelConfigWeb)
-      .end()
-    .use('ts')
-      .loader(require.resolve('ts-loader'));
+  let babelConfig = babelConfigWeb;
+  if (userConfig.inlineStyle) {
+    babelConfig = babelMerge.all([{
+      plugins: [
+        require.resolve('babel-plugin-transform-jsx-stylesheet')
+      ],
+    }, babelConfig]);
 
-  config.module.rule('css')
+    config.module.rule('css')
+    .test(/\.css?$/)
+    .use('css')
+      .loader(require.resolve('stylesheet-loader'));
+  } else {
+    config.module.rule('css')
     .test(/\.css?$/)
     .use('minicss')
       .loader(MiniCssExtractPlugin.loader)
@@ -71,6 +64,34 @@ module.exports = (context) => {
         ],
       });
 
+    config.plugin('minicss')
+    .use(MiniCssExtractPlugin, [{
+      filename: 'web/[name].css',
+      chunkFilename: 'web/[name].css',
+    }]);
+  }
+
+  config.module.rule('jsx')
+  .test(/\.(js|mjs|jsx)$/)
+  .exclude
+    .add(/(node_modules|bower_components)/)
+    .end()
+  .use('babel')
+    .loader(require.resolve('babel-loader'))
+    .options(babelConfig);
+
+  config.module.rule('tsx')
+  .test(/\.tsx?$/)
+  .exclude
+    .add(/(node_modules|bower_components)/)
+    .end()
+  .use('babel')
+    .loader(require.resolve('babel-loader'))
+    .options(babelConfig)
+    .end()
+  .use('ts')
+    .loader(require.resolve('ts-loader'));
+
   config.module.rule('assets')
     .test(/\.(svg|png|webp|jpe?g|gif)$/i)
     .use('source')
@@ -95,12 +116,6 @@ module.exports = (context) => {
       render: serverRender.renderToString,
     }]);
 
-  config.plugin('minicss')
-    .use(MiniCssExtractPlugin, [{
-      filename: 'web/[name].css',
-      chunkFilename: 'web/[id].css',
-    }]);
-
   config.plugin('noError')
     .use(webpack.NoEmitOnErrorsPlugin);
 
diff --git a/packages/rax-plugin-app/src/config/web/setDev.js b/packages/rax-plugin-app/src/config/web/setDev.js
index 1bd02406c2..7095f13f2f 100644
--- a/packages/rax-plugin-app/src/config/web/setDev.js
+++ b/packages/rax-plugin-app/src/config/web/setDev.js
@@ -25,6 +25,7 @@ module.exports = (config, context) => {
     .contentBase(path.resolve(rootDir, 'build'))
     .watchContentBase(true)
     .hot(true)
+    .quiet(true)
     .publicPath(publicPath)
     .overlay(false)
     .host(address.ip())
diff --git a/packages/rax-plugin-app/src/config/weex/setDev.js b/packages/rax-plugin-app/src/config/weex/setDev.js
index 863affb2c5..3a2f84187a 100644
--- a/packages/rax-plugin-app/src/config/weex/setDev.js
+++ b/packages/rax-plugin-app/src/config/weex/setDev.js
@@ -25,6 +25,7 @@ module.exports = (config, context) => {
     .contentBase(path.resolve(rootDir, 'build'))
     .watchContentBase(true)
     .hot(true)
+    .quiet(true)
     .publicPath(publicPath)
     .overlay(false)
     .host(address.ip())
diff --git a/packages/rax-plugin-app/src/index.js b/packages/rax-plugin-app/src/index.js
index 210c829573..d1cfdd67e4 100644
--- a/packages/rax-plugin-app/src/index.js
+++ b/packages/rax-plugin-app/src/index.js
@@ -4,7 +4,7 @@ const defaultUserConfig = require('./config/defaultUserConfig');
 const build = require('./build');
 const dev = require('./dev');
 
-module.exports = (api, options) => {
+const pluginApp = (api, options) => {
   const { context } = api;
   const { command } = context;
   // set default config
@@ -18,3 +18,13 @@ module.exports = (api, options) => {
     dev(api, options);
   }
 };
+
+pluginApp.getWebBase = require('./config/web/getBase');
+pluginApp.setWebDev = require('./config/web/setDev');
+pluginApp.setWebBuild = require('./config/web/setBuild');
+
+pluginApp.getWeexBase = require('./config/weex/getBase');
+pluginApp.setWeexDev = require('./config/weex/setDev');
+pluginApp.setWeexBuild = require('./config/weex/setBuild');
+
+module.exports = pluginApp;
diff --git a/packages/rax-plugin-ssr/package.json b/packages/rax-plugin-ssr/package.json
new file mode 100644
index 0000000000..70fdd94d78
--- /dev/null
+++ b/packages/rax-plugin-ssr/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "rax-plugin-ssr",
+  "version": "0.1.0-0",
+  "description": "rax ssr plugins",
+  "license": "BSD-3-Clause",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/rax.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alibaba/rax/issues"
+  },
+  "homepage": "https://github.com/alibaba/rax#readme",
+  "dependencies": {
+    "@babel/core": "7.2.0",
+    "@babel/plugin-proposal-class-properties": "7.2.0",
+    "@babel/plugin-proposal-decorators": "7.2.0",
+    "@babel/plugin-proposal-export-default-from": "7.2.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "7.2.0",
+    "@babel/preset-flow": "7.0.0",
+    "@babel/preset-react": "7.0.0",
+    "@babel/runtime": "^7.2.0",
+    "address": "^1.0.1",
+    "autoprefixer": "^9.4.3",
+    "babel-loader": "8.0.4",
+    "babel-merge": "^3.0.0",
+    "babel-plugin-transform-jsx-class": "^0.1.2",
+    "babel-plugin-transform-jsx-condition": "^0.1.0",
+    "babel-plugin-transform-jsx-fragment": "^0.1.1",
+    "babel-plugin-transform-jsx-list": "^0.1.0",
+    "babel-plugin-transform-jsx-memo": "^0.1.2",
+    "babel-plugin-transform-jsx-slot": "^0.1.1",
+    "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
+    "babel-runtime-jsx-plus": "^0.1.3",
+    "chalk": "^2.4.2",
+    "rax-plugin-app": "^0.1.0-0",
+    "rax-ssr-dev-server": "^2.0.0-0",
+    "stylesheet-loader": "^0.6.5",
+    "universal-app-shell-loader": "^0.1.1"
+  }
+}
diff --git a/packages/rax-plugin-ssr/src/index.js b/packages/rax-plugin-ssr/src/index.js
new file mode 100644
index 0000000000..daa2be37e7
--- /dev/null
+++ b/packages/rax-plugin-ssr/src/index.js
@@ -0,0 +1,25 @@
+const SSRDevServer = require('rax-ssr-dev-server');
+
+const getSSRBuildConfig = require('./ssr/getBuildConfig');
+const getSSRDevConfig = require('./ssr/getDevConfig');
+const setWebBaseConfig = require('./web/setBaseConfig');
+
+// can‘t clone webpack chain object
+module.exports = ({ chainWebpack, registerConfig, setDevServer, context }) => {
+  chainWebpack((config, { command }) => {
+    const rootDir = context.rootDir;
+    setWebBaseConfig(config, rootDir);
+
+    let ssrConfig;
+    if (command === 'build') {
+      ssrConfig = getSSRBuildConfig(context);
+    }
+
+    if (command === 'dev') {
+      ssrConfig = getSSRDevConfig(context);
+      setDevServer(SSRDevServer);
+    }
+
+    registerConfig('ssr', ssrConfig);
+  });
+};
diff --git a/packages/rax-plugin-ssr/src/ssr/babel.config.js b/packages/rax-plugin-ssr/src/ssr/babel.config.js
new file mode 100644
index 0000000000..e47dccdf65
--- /dev/null
+++ b/packages/rax-plugin-ssr/src/ssr/babel.config.js
@@ -0,0 +1,73 @@
+const chalk = require('chalk');
+
+const disableJSXPlus = process.env.DISABLE_JSX_PLUS;
+
+const config = {
+  presets: [
+    require.resolve('@babel/preset-flow'),
+    [
+      require.resolve('@babel/preset-env'),
+      {
+        targets: {
+          chrome: '49',
+          ios: '8'
+        },
+        loose: true,
+        modules: 'auto',
+        include: [
+          'transform-computed-properties'
+        ]
+      }
+    ],
+    [
+      require.resolve('@babel/preset-react'), {
+        'pragma': 'createElement',
+        'pragmaFrag': 'Fragment'
+      }
+    ]
+  ],
+  plugins: [
+    [
+      require.resolve('@babel/plugin-transform-runtime'),
+      {
+        'corejs': false,
+        'helpers': false,
+        'regenerator': true,
+        'useESModules': false
+      }
+    ],
+    require.resolve('@babel/plugin-syntax-dynamic-import'),
+    // Stage 0
+    require.resolve('@babel/plugin-proposal-function-bind'),
+    // Stage 1
+    require.resolve('@babel/plugin-proposal-export-default-from'),
+    [
+      require.resolve('@babel/plugin-proposal-optional-chaining'),
+      { loose: true },
+    ],
+    [
+      require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
+      { loose: true },
+    ],
+    // Stage 2
+    [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
+    require.resolve('@babel/plugin-proposal-export-namespace-from'),
+    // Stage 3
+    [
+      require.resolve('@babel/plugin-proposal-class-properties'),
+      { loose: true },
+    ]
+  ]
+};
+
+if (!disableJSXPlus) {
+  // Enable jsx plus default.
+  config.plugins.push(require.resolve('babel-plugin-transform-jsx-list'));
+  config.plugins.push(require.resolve('babel-plugin-transform-jsx-condition'));
+  config.plugins.push(require.resolve('babel-plugin-transform-jsx-memo'));
+  config.plugins.push(require.resolve('babel-plugin-transform-jsx-slot'));
+  config.plugins.push([require.resolve('babel-plugin-transform-jsx-fragment'), { moduleName: 'rax' }]);
+  config.plugins.push(require.resolve('babel-plugin-transform-jsx-class'));
+}
+
+module.exports = config;
diff --git a/packages/rax-plugin-ssr/src/ssr/getBaseConfig.js b/packages/rax-plugin-ssr/src/ssr/getBaseConfig.js
new file mode 100644
index 0000000000..54ee5810f6
--- /dev/null
+++ b/packages/rax-plugin-ssr/src/ssr/getBaseConfig.js
@@ -0,0 +1,64 @@
+'use strict';
+const path = require('path');
+const { getWebBase } = require('rax-plugin-app');
+const getEntries = require('./getEntries');
+const babelConfig = require('./babel.config');
+
+// Can‘t clone webpack chain object, so generate a new chain and reset config
+module.exports = (context) => {
+  const { rootDir, userConfig } = context;
+  const config = getWebBase(context);
+
+  config.entryPoints.clear();
+
+  const entries = getEntries(config, context);
+  Object.keys(entries).forEach((key) => {
+    config.entry(key)
+      .add(entries[key]);
+  });
+
+  config.resolve.alias
+    .clear()
+    .set('@core/app', 'universal-app-runtime')
+    .set('@core/page', 'universal-app-runtime')
+    .set('@core/router', 'universal-app-runtime');
+
+  config.target('node');
+
+  config.output
+    .filename('server/[name].js')
+    .libraryTarget('commonjs2');
+
+  config.plugins.delete('document');
+  config.plugins.delete('PWAAppShell');
+
+  config.plugins.delete('minicss');
+  config.module.rules.delete('css');
+
+  if (userConfig.inlineStyle) {
+    babelConfig.plugins.push(require.resolve('babel-plugin-transform-jsx-stylesheet'));
+
+    config.module.rules.delete('jsx');
+    config.module.rule('jsx')
+    .test(/\.(js|mjs|jsx)$/)
+    .exclude
+      .add(/(node_modules|bower_components)/)
+      .end()
+    .use('babel')
+      .loader(require.resolve('babel-loader'))
+      .options(babelConfig);
+
+    config.module.rule('css')
+    .test(/\.css?$/)
+    .use('css')
+      .loader(require.resolve('stylesheet-loader'));
+  } else {
+    config.module.rule('css')
+    .test(/\.css?$/)
+    .use('ignorecss')
+      .loader(require.resolve('./ignoreLoader'))
+      .end();
+  }
+
+  return config;
+};
diff --git a/packages/rax-plugin-ssr/src/ssr/getBuildConfig.js b/packages/rax-plugin-ssr/src/ssr/getBuildConfig.js
new file mode 100644
index 0000000000..c53519f9f0
--- /dev/null
+++ b/packages/rax-plugin-ssr/src/ssr/getBuildConfig.js
@@ -0,0 +1,14 @@
+'use strict';
+const getBaseWebpackConfig = require('./getBaseConfig');
+
+module.exports = (context) => {
+  const config = getBaseWebpackConfig(context);
+
+  config.mode('production');
+
+  config.optimization
+    .minimize(true)
+    .end();
+
+  return config;
+};
diff --git a/packages/rax-plugin-ssr/src/ssr/getDevConfig.js b/packages/rax-plugin-ssr/src/ssr/getDevConfig.js
new file mode 100644
index 0000000000..05f1587209
--- /dev/null
+++ b/packages/rax-plugin-ssr/src/ssr/getDevConfig.js
@@ -0,0 +1,34 @@
+'use strict';
+const path = require('path');
+const address = require('address');
+const getBaseWebpackConfig = require('./getBaseConfig');
+
+function setDevServerConfig(config, rootDir) {
+  const absoluteAppJSONPath = path.join(rootDir, 'src/app.json');
+  const appJSON = require(absoluteAppJSONPath);
+
+  const distDir = config.output.get('path');
+  const filename = config.output.get('filename');
+
+  const routes = {};
+
+  appJSON.routes.forEach((route) => {
+    const pathName = route.name || route.component.replace(/\//g, '_');
+    routes[route.path] = path.join(distDir, filename.replace('[name]', pathName));
+  });
+
+  config.devServer.hot(false);
+  config.devServer.port(9999);
+  config.devServer.host(address.ip());
+  config.devServer.set('routes', routes);
+}
+
+module.exports = (context) => {
+  const config = getBaseWebpackConfig(context);
+
+  config.mode('development');
+
+  setDevServerConfig(config, context.rootDir);
+
+  return config;
+};
diff --git a/packages/rax-plugin-ssr/src/ssr/getEntries.js b/packages/rax-plugin-ssr/src/ssr/getEntries.js
new file mode 100644
index 0000000000..05e33aeccf
--- /dev/null
+++ b/packages/rax-plugin-ssr/src/ssr/getEntries.js
@@ -0,0 +1,41 @@
+const path = require('path');
+const qs = require('querystring');
+
+const SSRLoader = require.resolve('./loader');
+
+module.exports = (config, context) => {
+  const { rootDir } = context;
+  const publicPath = config.output.get('publicPath');
+  const appDirectory = rootDir;
+  const appSrc = path.resolve(appDirectory, 'src');
+
+  const absoluteAppPath = path.join(appDirectory, 'src/app.js');
+  const absoluteAppJSONPath = path.join(appDirectory, 'src/app.json');
+  const absoluteDocumentPath = path.join(appDirectory, 'src/document/index.jsx');
+  const absoluteShellPath = path.join(appDirectory, 'src/shell/index.jsx');
+
+  const appJSON = require(absoluteAppJSONPath);
+  const routes = appJSON.routes;
+
+  const entries = {};
+
+  routes.forEach((route) => {
+    const entry = route.name || route.component.replace(/\//g, '_');
+    const absolutePagePath = path.resolve(appSrc, route.component);
+
+    const query = {
+      path: route.path,
+      pageName: entry,
+      absoluteDocumentPath,
+      absoluteShellPath,
+      absoluteAppPath,
+      absolutePagePath,
+      absoluteAppJSONPath,
+      publicPath
+    };
+
+    entries[entry] = `${SSRLoader}?${qs.stringify(query)}!${absolutePagePath}`;
+  });
+
+  return entries;
+};
diff --git a/packages/rax-plugin-ssr/src/ssr/ignoreLoader.js b/packages/rax-plugin-ssr/src/ssr/ignoreLoader.js
new file mode 100644
index 0000000000..fa50d0540b
--- /dev/null
+++ b/packages/rax-plugin-ssr/src/ssr/ignoreLoader.js
@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = function(content) {
+  this.cacheable && this.cacheable();
+  return '';
+};
\ No newline at end of file
diff --git a/packages/rax-plugin-ssr/src/ssr/loader.js b/packages/rax-plugin-ssr/src/ssr/loader.js
new file mode 100644
index 0000000000..c524fe8378
--- /dev/null
+++ b/packages/rax-plugin-ssr/src/ssr/loader.js
@@ -0,0 +1,103 @@
+const { parse } = require('querystring');
+const fs = require('fs');
+
+module.exports = function(content) {
+  const query = typeof this.query === 'string' ? parse(this.query.substr(1)) : this.query;
+
+  const {
+    absoluteDocumentPath,
+    absoluteShellPath,
+    absoluteAppPath,
+    absolutePagePath,
+    absoluteAppJSONPath,
+    publicPath,
+    pageName
+  } = query;
+
+  const hasShell = fs.existsSync(absoluteShellPath);
+  const shellStr = hasShell ? `import Shell from '${absoluteShellPath}'` : 'const Shell = function (props) { return props.children };';
+
+  return `
+    import { createElement } from 'rax';
+    import renderer from 'rax-server-renderer';
+    
+    import App from '${absoluteAppPath}';
+    import Page from '${absolutePagePath}';
+    import Document from '${absoluteDocumentPath}';
+    import appJSON from '${absoluteAppJSONPath}';
+
+    ${shellStr}
+    
+    async function renderComponentToHTML(req, res, Component) {
+      const ctx = {
+        req,
+        res
+      };
+    
+      const shellData = await getInitialProps(Shell, ctx);
+      const appData = await getInitialProps(App, ctx);
+      const pageData = await getInitialProps(Component, ctx);
+    
+      const initialData = {
+        shellData,
+        appData,
+        pageData
+      };
+
+      const contentElement = createElement(Shell, null, createElement(App, {
+        routerConfig: {
+          InitialComponent: Component,
+          routes: appJSON.routes
+        }
+      }));
+    
+      const initialHtml = renderer.renderToString(contentElement, {
+        defaultUnit: 'rpx'
+      });
+    
+      const documentProps = {
+        initialHtml: initialHtml,
+        initialData: JSON.stringify(initialData),
+        publicPath: '${publicPath}',
+        pageName: '${pageName}'
+      };
+    
+      await getInitialProps(Document, ctx);
+      const documentElement = createElement(Document, documentProps);;
+      const html = '<!doctype html>' + renderer.renderToString(documentElement);
+    
+      return html;
+    }
+    
+    export async function render(req, res) {
+      const html = await renderToHTML(req, res);
+    
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      res.send(html);
+    }
+    
+    export async function renderToHTML(req, res) {
+      const html = await renderComponentToHTML(req, res, Page);
+      return html;
+    }
+    
+    async function getInitialProps(Component, ctx) {
+      if (!Component.getInitialProps) return null;
+    
+      const props = await Component.getInitialProps(ctx);
+    
+      if (!props || typeof props !== 'object') {
+        const message = '"getInitialProps()" should resolve to an object. But found "' + props + '" instead.';
+        throw new Error(message);
+      }
+    
+      if (Component.defaultProps) {
+        Component.defaultProps = Object.assign({}, props, Component.defaultProps);
+      } else {
+        Component.defaultProps = props;
+      }
+    
+      return props;
+    }  
+  `;
+};
diff --git a/packages/rax-plugin-ssr/src/web/setBaseConfig.js b/packages/rax-plugin-ssr/src/web/setBaseConfig.js
new file mode 100644
index 0000000000..75d247c485
--- /dev/null
+++ b/packages/rax-plugin-ssr/src/web/setBaseConfig.js
@@ -0,0 +1,16 @@
+'use strict';
+const path = require('path');
+
+const UNIVERSAL_APP_SHELL_LOADER = require.resolve('universal-app-shell-loader');
+
+module.exports = (config, rootDir) => {
+  const appEntry = path.resolve(rootDir, 'src/app.js');
+
+  // remove hmrClient
+  config.entry('index').clear();
+
+  config.entry('index')
+  .add(`${UNIVERSAL_APP_SHELL_LOADER}?type=web!${appEntry}`);
+
+  return config;
+};
diff --git a/packages/rax-ssr-dev-server/index.js b/packages/rax-ssr-dev-server/index.js
index 9e38bda7a8..5b34240ed9 100644
--- a/packages/rax-ssr-dev-server/index.js
+++ b/packages/rax-ssr-dev-server/index.js
@@ -1,6 +1,5 @@
 const fs = require('fs');
 const express = require('express');
-const RaxServer = require('rax-server');
 const devMiddleware = require('webpack-dev-middleware');
 const hotMiddleware = require('webpack-hot-middleware');
 const httpProxyMiddleware = require('http-proxy-middleware');
@@ -18,35 +17,29 @@ class DevServer {
     // eslint-disable-next-line new-cap
     const router = express.Router();
 
-    const server = new RaxServer();
-
     const {
-      pagesManifest,
+      routes,
     } = this.options;
 
-    Object.keys(pagesManifest).forEach(page => {
-      // _document, _shell
-      if (page.indexOf('_') > -1) {
-        return;
-      }
-
-      router.get(`/${page}`, (req, res) => {
-        const pageConfig = this.getPageConfig(res, page);
-        server.render(req, res, pageConfig);
+    Object.keys(routes).forEach(routePath => {
+      router.get(routePath, (req, res) => {
+        const page = this.loadComponent(routes[routePath], res);
+        page.render(req, res);
       });
     });
 
-    if (pagesManifest.index) {
+    if (!routes['/'] && routes['/index']) {
       router.get('/', (req, res) => {
-        const pageConfig = this.getPageConfig(res, 'index');
-        server.render(req, res, pageConfig);
+        const page = this.loadComponent(routes['/index'], res);
+        page.render(req, res);
       });
     }
 
     app.use(
       devMiddleware(compiler, {
         serverSideRender: true,
-        index: false
+        index: false,
+        logLevel: 'error'
       })
     );
 
@@ -68,42 +61,7 @@ class DevServer {
     this.app.listen(port, callback);
   }
 
-  getPageConfig(res, page) {
-    const {
-      appConfig = {},
-      pagesManifest,
-      assetsManifest,
-      assetsManifestPath
-    } = this.options;
-
-    let assets = assetsManifest || {};
-    if (assetsManifestPath) {
-      const assetsContent = fs.readFileSync(assetsManifestPath, res);
-      assets = JSON.parse(assetsContent);
-    };
-
-    const pageConfig = {
-      page,
-      ...assets[page],
-      component: this.loadComponent(page, res),
-      document: {
-        title: appConfig.title,
-        component: pagesManifest._document ? this.loadComponent('_document', res) : null
-      },
-      shell: {
-        component: pagesManifest._shell ? this.loadComponent('_shell', res) : null
-      }
-    };
-
-    return pageConfig;
-  }
-
-  loadComponent(page, res) {
-    const {
-      pagesManifest
-    } = this.options;
-
-    const bundlePath = pagesManifest[page];
+  loadComponent(bundlePath, res) {
     const bundleContent = this.readFileSyncFromWebpack(bundlePath, res);
     const mod = eval(bundleContent);
 
diff --git a/packages/rax-ssr-dev-server/package.json b/packages/rax-ssr-dev-server/package.json
index c66d143f2a..99ebc460cd 100644
--- a/packages/rax-ssr-dev-server/package.json
+++ b/packages/rax-ssr-dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rax-ssr-dev-server",
-  "version": "1.0.1",
+  "version": "2.0.0-0",
   "description": "Rax SSR dev server.",
   "license": "BSD-3-Clause",
   "main": "index.js",
@@ -18,7 +18,6 @@
   "dependencies": {
     "express": "^4.17.1",
     "http-proxy-middleware": "^0.19.1",
-    "rax-server": "^1.0.0",
     "webpack-dev-middleware": "^3.7.0",
     "webpack-hot-middleware": "^2.25.0"
   }
diff --git a/packages/universal-app-runtime/src/router.js b/packages/universal-app-runtime/src/router.js
index ab5b2b8591..983a2a4d78 100644
--- a/packages/universal-app-runtime/src/router.js
+++ b/packages/universal-app-runtime/src/router.js
@@ -1,26 +1,79 @@
-import { createElement, useRef, useImperativeHandle } from 'rax';
+import { createElement, useRef, useState, useImperativeHandle } from 'rax';
 import * as RaxUseRouter from 'rax-use-router';
-import { isWeex, isWeb } from 'universal-env';
+import { isWeex, isWeb, isNode } from 'universal-env';
 import { createHashHistory } from 'history';
 import encodeQS from 'querystring/encode';
 
-
 let _history = null;
 let _routerConfig = {};
 
+// current process Page.getInitialProps path
+let _currentPagePath;
+// The initialProps
+let _initialProps = {};
+// The initialPropsProps from SSR
+let _initialPropsFromSSR = null;
+// Mark if the page is loaded for the first time.
+// If it is the first time to load, SSR pageInitialProps is taken from the scripts.
+// If the SPA has switched routes then each sub-component needs to run getInitialProps
+let _isReadInitialPropsFromSSR = false;
+
+try {
+  if (window.__INITIAL_DATA__) {
+    _initialPropsFromSSR = window.__INITIAL_DATA__.pageData;
+  }
+} catch (e) {
+  // ignore SSR window is not defined
+}
+
+
 export function useRouter(routerConfig) {
   _routerConfig = routerConfig;
-  const { history = createHashHistory(), routes } = _routerConfig;
-  _history = history;
+
+  if (isWeb) {
+    const { history = createHashHistory(), routes } = routerConfig;
+    _history = history;
+  }
 
   function Router(props) {
+    const [currentPath, setCurrentPath] = useState('');
+
+    // return initial component in ssr
+    if (isNode && routerConfig.InitialComponent) {
+      return createElement(routerConfig.InitialComponent, props);
+    }
+
     const { component } = RaxUseRouter.useRouter(() => _routerConfig);
 
     if (!component || Array.isArray(component) && component.length === 0) {
       // Return null directly if not matched.
       return null;
     } else {
-      return createElement(component, props);
+      // process Page.getInitialProps
+      if (_currentPagePath !== _history.location.pathname) {
+        _initialProps = {};
+        _currentPagePath = _history.location.pathname;
+        // SSR project the first time is initialized from global data,
+        // after that the data will be obtained from the component's own getInitialProps
+        if (_initialPropsFromSSR !== null && !_isReadInitialPropsFromSSR) {
+          // After routing switching, it is considered not the first rendering.
+          _initialProps = _initialPropsFromSSR;
+          _isReadInitialPropsFromSSR = true;
+        } else if (component.getInitialProps) {
+          // wait getInitialProps
+          component.getInitialProps().then((props) => {
+            _initialProps = props;
+            setCurrentPath(_currentPagePath);
+          }).catch(() => {
+            _initialProps = {};
+            setCurrentPath(_currentPagePath);
+          });
+          return null;
+        } else {
+          setCurrentPath(_currentPagePath);
+        }
+      }
+      return createElement(component, { ...props, ..._initialProps });
     }
   }
 
diff --git a/packages/universal-app-shell-loader/package.json b/packages/universal-app-shell-loader/package.json
index ba5682d7bd..2bf80e52aa 100644
--- a/packages/universal-app-shell-loader/package.json
+++ b/packages/universal-app-shell-loader/package.json
@@ -13,6 +13,7 @@
   },
   "homepage": "https://github.com/alibaba/rax#readme",
   "dependencies": {
-    "loader-utils": "^1.2.3"
+    "loader-utils": "^1.2.3",
+    "path-to-regexp": "^3.0.0"
   }
 }
diff --git a/packages/universal-app-shell-loader/src/index.js b/packages/universal-app-shell-loader/src/index.js
index 59db0e8c5e..418b09f860 100644
--- a/packages/universal-app-shell-loader/src/index.js
+++ b/packages/universal-app-shell-loader/src/index.js
@@ -1,6 +1,7 @@
 const { join } = require('path');
 const { getOptions } = require('loader-utils');
 const { existsSync } = require('fs');
+const pathToRegexp = require('path-to-regexp');
 
 const historyMemory = {
   hash: 'createHashHistory',
@@ -24,6 +25,8 @@ module.exports = function(content) {
 
     let appRender = '';
     let fixRootStyle = '';
+    let importMods = '';
+
     /**
      * Weex only support memory history.
      */
@@ -35,17 +38,54 @@ module.exports = function(content) {
      * Web only compatible with 750rpx.
      */
     if (options.type === 'web') {
+      let appRenderMethod = '';
       const mutiple = options.mutiple || 100;
       fixRootStyle = `
         const html = document.documentElement;
         html.style.fontSize = html.clientWidth / 750 * ${mutiple} + 'px';
       `;
-      appRender = 'render(createElement(Entry), document.getElementById("root"), { driver: DriverUniversal });';
-      // app shell
+      importMods += 'import { getCurrentComponent } from "rax-pwa";';
+
       if (existsSync(join(this.rootContext, 'src/shell/index.jsx'))) {
-        appRender = `import Shell from "${getDepPath('shell/index', this.rootContext)}";`;
-        appRender += 'render(createElement(Shell, {}, createElement(Entry)), document.getElementById("root"), { driver: DriverUniversal, hydrate: true });';
+        // app shell
+        appRender += `import Shell from "${getDepPath('shell/index', this.rootContext)}";`;
+        appRenderMethod = `
+          // process Shell.getInitialProps
+          // use global props appProps as shell default props
+          const shellProps = {...appProps};
+          if (withSSR && window.__INITIAL_DATA__.shellData !== null) {
+            Object.assign(shellProps, window.__INITIAL_DATA__.shellData);
+          } else if (Shell.getInitialProps) {
+            Object.assign(shellProps, await Shell.getInitialProps());
+          }
+          render(createElement(Shell, shellProps, createElement(Entry)), document.getElementById("root"), { driver: DriverUniversal, hydrate: true });
+        `;
+      } else {
+        // common web app
+        appRenderMethod = 'render(createElement(Entry), document.getElementById("root"), { driver: DriverUniversal, hydrate: withSSR });';
       }
+
+      appRender += `
+        const renderApp = async function() {
+          // process App.getInitialProps
+          if (withSSR && window.__INITIAL_DATA__.appData !== null) {
+            Object.assign(appProps, window.__INITIAL_DATA__.appData);
+          } else if (definedApp.getInitialProps) {
+            Object.assign(appProps, await definedApp.getInitialProps());
+          }
+          ${appRenderMethod}
+        }
+        if (withSSR) {
+          getCurrentComponent(appProps.routerConfig.routes, true)().then(function(InitialComponent) {
+            if (InitialComponent !== null) {
+              appProps.routerConfig.InitialComponent = InitialComponent;
+            }
+            renderApp();
+          });
+        } else {
+          renderApp();
+        }
+      `;
     }
 
     /**
@@ -60,11 +100,16 @@ module.exports = function(content) {
     const assembleRoutes = routes.map((route, index) => {
       // First level function to support hooks will autorun function type state,
       // Second level function to support rax-use-router rule autorun function type component.
-      const dynamicImportComponent = `() => import(/* webpackChunkName: "${route.component.replace(/\//g, '_')}" */ '${getDepPath(route.component, this.rootContext)}').then((mod) => () => interopRequire(mod))`;
+      const dynamicImportComponent =
+      `() => 
+        import(/* webpackChunkName: "${route.component.replace(/\//g, '_')}" */ '${getDepPath(route.component, this.rootContext)}')
+        .then((mod) => () => interopRequire(mod))
+      `;
       const importComponent = `() => () => interopRequire(require('${getDepPath(route.component, this.rootContext)}'))`;
 
       return `routes.push({
         index: ${index},
+        regexp: ${pathToRegexp(route.path).toString()},
         path: '${route.path}',
         component: ${options.type === 'web' ? dynamicImportComponent : importComponent}
       });`;
@@ -76,9 +121,11 @@ module.exports = function(content) {
       import { ${historyMemory[historyType]} as createHistory } from 'history';
       import { _invokeAppCycle } from 'universal-app-runtime';
       import DriverUniversal from 'driver-universal';
+      ${importMods}
       
       const interopRequire = (mod) => mod && mod.__esModule ? mod.default : mod;
-
+      const withSSR = !!window.__INITIAL_DATA__;
+      
       const getRouterConfig = () => {
         const routes = [];
         ${assembleRoutes}
