讓這三個月來的更猛烈些吧，前端react同構項目

昨天一篇文章講述了我在這三個月中由.net到java的過程，其中踩坑填坑的細節真不是三言兩語能夠道盡，而完成時的喜悅也遠非尋常可比（僅次於漲工資）。然而到這並不算完結，做爲先後端分離的忠實粉絲，我認爲服務端更應關心數據處理、存儲、負載、併發等問題，而與頁面相關的開發諸如渲染、操做、樣式、動畫等都應交由前端人員處理。

 

做爲一個常年在服務端玩耍的打怪青年，若是幾年前有人告訴我說要把個人視圖頁拿出去單獨開發，我會認爲他在開玩笑，然而隨着這幾年前端超級無敵迅速的發展，前端的框架、構建工具、包管理器等不斷的完善，前端開發進入了一個工程化的時代，甚至能夠說如今的前端和移動端app是等價的，只是其運行的載體不一樣而已，因此先後端分離模式就變得可行，也很優雅。

 

前端技術選型

前端的框架、工具什麼的實在太多了，近乎亂象，然而這並不影響什麼，選擇並無想象中的那麼艱難，由於真正須要選擇的東西只有一個：框架。對於目前比較火熱的三大前端框架angular、react和vue。angular由於我的喜愛問題被首先排除，因此我僅僅須要react和vue中二選一便可，最終咱們選擇了react。接下來就是針對react的深度學習了，期間涉及到的技術包括：react.js、es六、webpack、babel、fetch等。因爲以前爲BodeAbp項目寫過一個react的前端，因此這塊知識我還算熟悉。

 

SEO帶來的傷痛

熟悉前端開發的小夥伴大概知道，如今這些前端框架除了數據綁定、模塊化、虛擬dom等功能特性以外，還能夠結合前端路由實現單頁應用（spa），單頁應用能給咱們帶來更好的頁面性能和用戶體驗。可是，有利就有弊，我想這個世界上就沒有任何一個東西是完美的吧，單頁應用程序在seo方面的表現實在是差強人意（谷歌除外），而對於一個平臺性質的網站，這是不能容忍的問題。

 

同構

seo問題是必需要解決的，然而我搜遍了國內外各類網站找到的解決方案都是：ssr（server side render），即服務端渲染，感受繞來繞去又回到了原地，得益於nodejs的迅速發展以及react對於服務端渲染的支持，使得這個問題能夠比較優雅的獲得解決，也就是前端所謂的同構方案，什麼是同構？ 同構JavaScript應用指的是用JavaScript編寫的應用，可以同時運行於客戶端和服務器。這裏盜用一張圖方便理解：

感謝Github的強大，感謝 https://github.com/kriasoft/react-starter-kit項目給我帶來的啓發，我最終在該項目的基礎上修改出了我須要的項目結構。再一次站在了巨人的肩膀上看了一眼前端的世界，欣賞美景的同時也豐富了自身。最後再推薦一下這篇講解服務端渲染的文章： http://www.jianshu.com/p/0ecd727107bb，這是我找到的最好最全面的講解ssr的文章了。

 

寫在最後

目前這個項目已經正式用於開發，react的模塊化機制被使用的淋漓盡致，一個頁面由各類不一樣的組件拼接而來，組件獲得了很好的複用。ssr給咱們帶來了傷痛的同時也給咱們帶來了一些好處，好比能夠在服務端請求首屏數據，其餘數據在客戶端請求，加快首屏渲染速度的同時也不影響用戶體驗。最後仍是將業務代碼刪除後把項目放上了Github，有興趣的能夠看看： https://github.com/liuxx001/cczcrv-react。

還原包命令：yarn install；項目啓動命令：npm start

ps：爲何前端框架也須要我來搭，這真是一個憂傷的問題。