好久沒寫博客了~前段時間一直在忙着一個項目上線，最近終於完事了~有一段清閑，正好研究研究React的服務端渲染；
其實React服務端渲染就是用Node.js的v8引擎，在Node端執行JS代碼，把React的DOM樹渲染成html，然后頁面就可以直接加載了，省去頁面再執行React代碼的時間~當然客戶的還是要執行React代碼的，因為我們的事件還需要綁定到對應的DOM上；
言歸正傳：這個項目的結構絕大部分都參考的是陳屹先生的《深入React技術棧》中React服務端渲染中的例子，https://github.com/arcthur/react-book-examples 這個就是書中例子的鏈接，有React-Redux的例子，React服務端渲染的例子等等；
我采用的就是React服務端這個例子的結構，不過陳屹先生的服務端渲染例子並沒有Redux，我加上去了；此外還有一些結構上的變動等，我根據自己的項目更改的等；
而且陳屹先生的那個例子只是參考並不太復雜，我的稍微復雜一些基本上我把一個主頁需要具備的輪播圖，內容框，各種State的管理，組件的復用，CSS的處理等都加上去了；
地址是https://github.com/sven36/ReactReduxExample 大家有感興趣的可以看一下；
首先：先看一下項目的結構(如圖)：如果你想運行的話需要先在react-server目錄npm install服務端JS的依賴包，再在assets目錄npm install客戶端JS的依賴包，在assets目錄運行webpack生成本地JS，再回到react-server目錄 執行npm run start 就可以了；
其次：服務端渲染涉及到的知識點還是非常多的，包括Koa，Redux，Koa的各種中間件，Redux的功能擴展包，react-redux的高級用法，sass打包，babel與webpack配置等等；初涉其中可能感覺眼花繚亂，不知所雲，這時候就需要耐心一個一個的知識點去看，我個人是先根據文檔嘗試其最初始的寫法然后再一步一步更換到其更精簡的寫法（一般都是引入新的插件等等），這個過程尤其要注意各個模塊的版本號，比如React-Router4.00的版本和2.00的版本相比基本上就是一個新的模塊了，此外這個過程中還有非常多的各種各樣的小問題，突然這么一想有些想不起來了，不過耐心，多看代碼，多思考基本上都會解決的 ；
最后貼幾個主頁的效果（我是俠客風雲傳前傳的粉絲）：
