鐵人賽 前後端溝通的演進 - Jian-Min-Huang/tech-note GitHub Wiki
前言
今天來講的主題我個人覺得挺實戰的，94身為後端攻城獅一定會遇到的前後端溝通。隨著這些年技術的演進這一直跟著改變著，但有趣的是有時候他會回頭擁抱過去，有時候他會換個長相再戰十年 (Windows XP: 誰叫我？)
我自己實務上遇到的痛點往往是錯誤的技術選型導致客戶錯誤的期待，譬如說某件事在古早 XXP 時代可能輕鬆搞定，可是改成 Ajax 來做就很痛苦。這其實告訴我們的是要了解每個技術的生成背景跟他的 Pros. & Cons.，不要看到一個東西紅就想跟著用，不然這個苦果只能施主您自己吞了 (阿彌陀佛)
SSR (Server Side Render)
還記得古早時代的 XXP 輝煌時代嗎，PHP、ASP、JSP！？從早期純靜態網頁一進入動態網頁的年代，這三個算是各自雄霸一方，後來都各自還有發展，尤其 PHP 紅到今天還在紅，並且在特定的領域依舊有死忠粉絲。
這些都屬於 Server Side Render 的部份，也就是說動態的部份由後端處理，生成頁面元素之後再回傳給前端。因為早期後端的運算資源比前端來的好，雖然要付出網路延遲的代價，但是處理較大的資料還是有效益。而且對於 SEO (Search Engine Optimization) 的爬蟲來說也是有效果，這也是為什麼後來 Client Side Render 雖然大紅，但 Server Side Render 又紅回來的其中一個原因。
CSR (Client Side Render) & SPA (Single Page Application)
終於到了介紹我大 jQuery 的時候，在辣個紅極一時的年代，你說你不會 jQuery 可能會被路邊老太太笑，但你現在說你不會 React、Vue、Angular 人家可能會原諒你！？
其實就是當年用戶端的資源隨著硬體條件的進步越來越好，javascript 可以做的事也越來越多，不再只是那個單純操作 DOM 和 CSS 的吳下阿蒙，另外一個很大的轉捩點是 Ajax (Asynchronous JavaScript and XML) 技術的成熟配上原生 js 太不酷和 jQuery 太好寫，jQuery 簡直掃平海內外，盛況空前阿！
那 Ajax 會什麼會紅！？主要來自非同步更新可以帶來更好的使用者體驗，尤其在瀏覽器引擎進步之後更是效率 up up。自然這種不換頁全用背景發請求的非同步更新頁面的 SPA 就大紅特紅，舉例來說 GMAIL 就是 SPA 的設計。與此同時後端跟前端溝通的協定也不再是包含頁面元素，而是單純只使用資料來傳遞 (JSON or XML)，關注點的分離也使得架構與資料流起了一些好的變化。
其實這裡還可以延伸提到 Flash 或是像 Applet 那些東西，不過那不是我專長，小弟不敢亂講，有興趣的人可以去爬爬歷史。
Mix
又回來了！你484寫錯？別懷疑，沒錯，他又回來了。來了！來了！從山坡上一起輕輕地爬下來了，SSR & CSR 聯手啦，哈哈。
先來談剛剛說的 SEO 問題是啥呢？是這樣的，如果用了太多 Client Side Render 的技術，搜尋引擎的爬蟲因為沒有驅動用戶端 js，會爬到空的頁面，導致無法最佳化 (但現在聽說搜尋引擎變聰明了)，所以有些東西還是要先由 Server 在一開始先 Render 出來。
而且人就是這樣嘛，瀏覽器資源多了就想塞越來越多東西去前端做，久了大家開始思考說其實有些東西後端做還是比較合理，所以就變成各取所長的作法。
https://www.youtube.com/watch?v=tiL9TA3XC_w
但時間序其實是三大前端框架 React、Vue、Angular 先紅起來，然後圍繞他們生態系展開之後才有人寫這個 SSR 的 Server，像是 Next.js or Nuxt.js。而且當前端可以自己先往自己後面打的時候也可以處理掉跨域問題，同時部屬方式也有改變，帶來許多新的演進，真的是說有多酷就有多酷。
仔細算算開賽到現在有16天了，不知道大家有沒有一種感覺就是技術的演進其實是一些重複的 pattern 在輪迴，不是說出了新的舊的就丟掉，或是說他有時候只是老酒新瓶，希望在茫茫程式海中迷惘的小小攻城獅能夠看出這點，找到屬於自己的方向。
About Me
Jian-Min Huang
wide range skill set backend engineer
Research, Architecture, Coding, DB, Ops, Infra.
mainly write Java but also ❤️ Scala, Kotlin and Go