aso ssr seo ava git blog 發展 客戶端請求 功能

昨天一篇文章講述了我在這三個月中由.net到java的過程，其中踩坑填坑的細節真不是三言兩語可以道盡，而完成時的喜悅也遠非尋常可比（僅次於漲工資）。然而到這並不算完結，作為前後端分離的忠實粉絲，我認為服務端更應關心數據處理、存儲、負載、並發等問題，而與頁面相關的開發諸如渲染、操作、樣式、動畫等都應交由前端人員處理。 作為一個常年在服務端玩耍的打怪青年，如果幾年前有人告訴我說要把我的視圖頁拿出去單獨開發，我會認為他在開玩笑，然而隨著這幾年前端超級無敵迅速的發展，前端的框架、構建工具、包管理器等不斷的完善，前端開發進入了一個工程化的時代，甚至可以說現在的前端和移動端app是等價的，只是其運行的載體不同而已，所以前後端分離模式就變得可行，也很優雅。 前端技術選型

前端的框架、工具什麽的實在太多了，近乎亂象，然而這並不影響什麽，選擇並沒有想象中的那麽艱難，因為真正需要選擇的東西只有一個：框架。對於目前比較火熱的三大前端框架angular、react和vue。angular因為個人喜好問題被首先排除，所以我僅僅需要react和vue中二選一即可，最終我們選擇了react。接下來就是針對react的深度學習了，期間涉及到的技術包括：react.js、es6、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：為什麽前端框架也需要我來搭，這真是一個憂傷的問題。

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