原文鏈接

React version 16.2 版本腳手架

包含客戶端，服務端渲染完整示例，使用了最新的react,并實現version 16.2 最新的服務端渲染; 解決了一些之前的服務端渲染bug;并添加了調試的服務端渲染模式; 使用webpack 4.0 來編譯

<!-- 分離的第三方依賴 --> <script src="../dist/js/vendor.js"></script><!-- react --> <script src="../dist/js/app.js"></script>

安裝命令和一些常用的npm腳本;

• yarn (安裝腳手架依賴)
• yarn preinstall (檢查node版本,最低8.0以上版本)
• yarn prestart (刪除dist 編譯打包文件)
• yarn start (啟動客戶端的開發環境)
• yarn build (打包編譯客戶端環境,并啟動)
• yarn prod (啟動并打包服務端渲染)
• yarn server (啟動服務端渲染開發環境)
• yarn lint (檢查代碼規范)
• yarn lint:watch (檢查代碼規范并監聽)
• yarn test (啟動單元測試)
• yarn test:watch (啟動單元測試并監聽)
• yarn remove-dist (刪除dist文件夾)
• yarn clean-dist (清空dist文件夾)

一些常見問題

部署到服務器上,需要nginx 反向代理啟動node.js 的http 服務;

刷新之后 404 或者子路由報錯；是使用了 BrowserRouter這個路由或者分割了代碼。這個路由會開啟h5 的history 模式;所以需要nginx的支持; nginx uri 定向到例如是打包文件是通過index.html 就重定向到index.html;如果是放在index.php就重定向到index.php就不會有這個問題了；

服務端渲染的樣式需要放在入口內。不是服務端渲染的就不用;

這個腳手架是封裝了axios 這個ajax庫到redux中；所以不用在調用的地方引入axios;只需要在redux的action中使用我在redux中封裝的axios 中間件的別名 例如: api.get api.post等就好了;action中也符合redux的方式;

需要注意的是不是服務端渲染的啟動命令也是不同的; 服務端渲染主要是為了解決seo問題，因為是單頁應用。必須用戶點擊打開index.html 或index.php 或者站點后才能加載打包后的js 文件開始渲染節點內容; 沒有加載js 也就不能渲染出節點。也就不能被搜索引擎檢索到； 這也就是服務端渲染的需要;另外服務端渲染也加快網頁加載速度; 只要服務器壓力能承受住;

為什么服務端渲染不分割代碼。因為會報錯；而且用了壓縮代碼會小很多;普通十多張頁面不會超過1MB .1Mb對于服務端來說并沒有什么..

更新日志(2018.03.07)

優化父子路由的寫法。 父路由嵌套子路由

解決了服務端之前存在的報錯問題。并加入服務端渲染調試模式,

優化redux路由數據在服務端渲染的時候不同步問題;

增加redux axios 中間件調用方法;以及調用獲取數據例子

增加 使用react-router-redux 編程式導航的例子;通過代碼跳轉到頁面返回上級頁面;并保證redux的數據同步，不會延遲;

webpack 升級到webpack version 4.1.0;

移除mocha 測試.使用更加簡單的jest來處理測試

更新webpack-dev-middleware與 webpack-hot-middleware,

示例圖片 || 已經解決了之前服務端端存在問題

"示例圖片"

演示地址。不含服務端渲染;

演示

總結

以上是生活随笔為你收集整理的react-template 包含客户端，服务端渲染完整示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。