隨著React服務端渲染越來越流行实抡，筆者也想嘗嘗鮮抡笼，經(jīng)過半個月的折騰，筆者把原先的客戶端渲染項目甜奄，通過結(jié)合 next.js 構(gòu)建了一個服務端渲染的同構(gòu)項目柠横。再加上開啟服務器頁面緩存，以及靜態(tài)資源CDN加速優(yōu)化贺嫂，最終使得網(wǎng)站首屏渲染時間在0.6秒（即：DOMContentLoaded 的時間）左右滓鸠，大大提高了頁面的響應速度，進一步提升用戶體驗第喳。
渲染截圖
ssr.png
項目線上地址
前端架構(gòu)源碼
架構(gòu)簡要說明
很顯然，這是移動端網(wǎng)站踱稍，選用了 React16 + next.js4 + antd-mobile2 + redux 的技術棧曲饱，算是筆者學習React 兩年來第一個服務端渲染的項目。由于愛折騰珠月，筆者喜歡自己動手搭腳手架扩淀，期間參考了各路大牛的源碼和想法，非常感謝啤挎！所以這次做下總結(jié)驻谆，如果恰好能幫到在React服務端渲染方面有困惑的同學，何樂而不為庆聘？
-
目錄胜臊，具體參照源碼所示
image.png - 代碼規(guī)范，本架構(gòu)通過 eslint 配備了完善了 React 語法規(guī)范檢查伙判。
- 樣式象对，由于 next.js 目前的版本（v 4.2）并不建議配置loader（據(jù)說下個版本會支持），所以我們的樣式最好能提前編譯好宴抚，為此筆者額外配置了 webpack-handle-css.js 的文件勒魔，用于樣式的實時編譯和打包。同時引入了 antd-mobile 作為輔助UI庫菇曲，并且支持主題配置冠绢。當然，本站依然使用了rem布局常潮，至于字形圖標的使用請參閱這里弟胀。
- next，next有自己的運行機制，你需要注意和遵守邮利，比如你的所有頁面都必須放到根目錄下的pages文件夾里弥雹，至于路由和文件路徑的關系，在 server.js 里有展示延届。另外剪勿，next 有自己的路由模塊，所以這里用不到
react-router方庭。更多詳情 - 組件厕吉，可以復用的模塊要寫成組件；不能復用械念，但是邏輯比較復雜的模塊也應該寫成組件头朱。其余的，都寫在pages里就行了龄减。組件分為無狀態(tài)組件项钮，和有狀態(tài)組件，需要指出的是希停，在next.js的架構(gòu)中烁巫，如果你寫的是無狀態(tài)組件，可以不用引入 react宠能，如：
export default ({ text }) => ( <div className="h100 flex jc-center ai-center"> <i className="i-loading rotate font32 c999" /> <span>{text || '加載中...'}</span> </div> ) - redux亚隙，初始化的redux數(shù)據(jù)，統(tǒng)一寫在每個page的getInitialProps生命周期里违崇，它的特點是可以在服務端渲染和客戶端渲染中都能使用阿弃。更多細節(jié)都在源碼里，歡迎交流探討羞延。
- 部署上線渣淳，這是個同構(gòu)項目，需要配置服務器node環(huán)境肴楷，在 server.js 文件里水由，筆者開啟了服務端頁面緩存，但對于有用戶數(shù)據(jù)的頁面則是選擇了關閉緩存赛蔫，避免串號問題砂客，另外在 next.config.js 文件里，通過設置 assetPrefix 呵恢，將所有靜態(tài)資源放入CDN中鞠值，進一步提高網(wǎng)站首屏渲染速度。CDN 中的靜態(tài)資源需要手動導出渗钉，運行
npm run export彤恶，資源將被打包到根目錄下的 outCDN 中钞钙。
