目的

這問題首先我們要給出為什么使用服務端渲染，主要基于以下三點
1.利于SEO：React服務器渲染的方案使你的頁面在一開始就有一個HTML DOM結構，方便Google等搜索引擎的爬蟲能爬到網頁的內容。
2.提高首屏渲染的速度：服務器直接返回一個填滿數據的HTML，而不是在請求了HTML后還需要異步請求首屏數據
3.前后端都共用代碼，提供開發效率
其中提到了共用代碼，即前后端共用一套，如下圖，這一具體實現就需要使用同構

image.png

為什么要用webpack-isomorphic-tools

webpack可以將任意資源打包，那是在客戶端，但是當其運行在服務端時，對于非js文件是無法正常import的，這里我的處理辦法是webpack-isomorphic-tools

需要做什么

我們接著上一篇加了路由的基礎上看看改了什么，上面為修改的，下面為新增的

image.png

1.package.json

image.png

可以看出，安裝了依賴包，主要是webpack-isomorphic-tools，另外的包是用來加載scss的，可忽略

2.src/server/index.js

require('babel-register')
require('babel-polyfill')

const Webpack_isomorphic_tools = require('webpack-isomorphic-tools')
global.webpack_isomorphic_tools = new Webpack_isomorphic_tools(require('../webpack/webpack-isomorphic-tools-configuration'))
  .server('./')
  .then(() => {
    require('./app');
  })

頭兩句用來是app.js支持es6的語法，主要看第三行開始的代碼，可以看出引入了同構的包，然后使用構造函數來新建了一個對象，這個構造函數加載了一個文件（下面會提到），然后調用了server,它引用了一個路徑，這個路徑用來生成配置文件中的一些文件的路徑，此處是用于生成webpack-assets.json，然后去引用了app.js，這一段照抄即可

3.src/server/app.js

這個文件比較龐大，其實它就是router的那一部分內容，就不貼出代碼了

4.src/webpack/webpack-isomorphic-tools-configuration.js

這是同構的配置文件，即核心文件，一般情況下不需要修改，直接用即可，只提其中的一句

webpack_assets_file_path: __dirname + '/webpack-assets.json',

這用來配置生成的對照文件文件

5.src/webpack/webpack-assets.json

這個文件就是上面說的對照文件，我們看看它長什么樣

{
  "javascript": {
    "main": "/static/bundle.js"
  },
  "styles": {},
  "assets": {
    "./src/containers/About/main.scss": {
      "test": "test_1qbej",
      "_style": ".test_1qbej {\n  color: red; }\n"
    }
  }
}

很明顯，它就是生成的一些映射關系，我在搭環境時，遇到了一個坑，假如不手動去生成這個文件，而是由同構自己去生成，那么會陷入死循環，一直如下

[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)

有遇到這個情況的，還望多多指教

6.src/webpack/webpack.config.js

直接上代碼吧

var webpack = require('webpack')
var path = require('path')
const Webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin');
const webpack_isomorphic_tools_plugin =
  new Webpack_isomorphic_tools_plugin(require('./webpack-isomorphic-tools-configuration')).development()


module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr',
    './src/index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/static/'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: ['babel-loader']
    }, {
      test: /\.scss$/,
      loader: [
        'style-loader',
        'css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]_[hash:base64:5]',
        'sass-loader?sourceMap'
      ].join('!')
    },  {
      test: webpack_isomorphic_tools_plugin.regular_expression('images'),
      loader: 'url-loader?limit=10240'
    }]
  },
  plugins: [
    webpack_isomorphic_tools_plugin,
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}

就加了同構工具的引用，已經配置，還有scss文件的loader，比較簡單，就不贅述了。
好了，基本上react腳手架的東西差不多就這么多了，還剩的應該就是具體的開發了，如生命周期，Immutable之類的，有時間我再繼續寫。