導言

開發前端時，是否常常遇到許多靈異現象，或是不明就理的延用慣例，約定俗成的命名方式等等。
這本書就像是開發網站界的十萬個為什麼，你在開發時也發現過很多不明究理的問題嗎? 那本書或許可以讓你找到解答。

架構

本書非傳統教學書，本書列了30個開發會遇到的問題，並且詳述原理。

摘要

請寫出間隔一秒印出 1, 2, 3, 4, 5 的程式碼。
相信稍有經驗的開發者多少都看過這題了，應該是彈指之間便能輕鬆解決；但初步接觸 JavaScript 的朋友，可能會撰寫出類似下面範例的程式碼：

for(var i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 1000 * i)
}

然後就得到間隔一秒印出五次 6 的結果。
為什麼會這樣呢？今天就讓我們研究這現象背後的原因吧～

總結

難易度

⭐⭐

自備技能

1. JS 程撰寫能力
2. 前後端網站開發能力

適合對象

中階

心得

本書看似輕鬆易讀，但很多內容如未俱備一定之前後端網站開發經驗可能難以理解作者的用意。
例如：
為什麼網站要做成 SPA ? SPA 的優點是什麼 ? 
光是本節提及的名詞就有SEO、SPA 、SSR、MVC、Isomorphic Javascript ，每一個解釋，都在兩頁以內，但筆者以為，如果要解釋清楚，都可以出一本了。

SEO

Search Engine Optimization 收尋引擎最佳化
SEO 為什麼如此重要，因為可以獲得自然流量，相較於現在昂貴的付費流量(影音廣告、文字廣告…)，自然流量不但看似免費，而且還相當優質，因為是使用者有這項需求，才會去收尋到的，轉換率，肯定比亂槍打鳥的曝光來的強，但是呢！
你會這麼想，別人也是，所以 SEO 就成兵家必爭之地；可以這麼說，基本上一個沒有 SEO 的網站，就算效能再好，也是一個廢站。
所以導致 SEO 的排名是什麼呢？SSR vs SPA ?

SPA 

Single Page Application 單頁式應用
是近年 Google 主推的網站架構，幾乎 Google 大部份的應用，例如 gmail maps docs sheets … 都是 SPA 。
前後端分離架構，前端瀏覽器先讀取一個框架，之後再讀取資料，再顯示。
雖然整體架構清楚，但剛問世時，對於網站開發者來說是個災難，收尋引擎爬蟲一開始只會爬到框架，沒有任何資料，就是只有一片空白；但目前收尋引擎已經學會等待了。
react https://reactjs.org/
vue https://vuejs.org/

SSR

Server-Side Rendering 伺服器渲染
網站剛問世時，其實就只有 SSR 伺服器渲染，是因為 SPA 紅了之後，相對的，就有了 SSR 這個名詞。
而大家又重視 SSR 的原因，就是因為前述問題，導致 SPA 網站沒有 SEO ，為了解決這個問題，只好再將 SSR 給搬了出來，讓網頁完整輸出包含資料的內容，讓收尋引擎爬蟲可以正確的爬到我們所希望給使用者的資料。
知名框架
next.js https://nextjs.org/
nuxt.js https://nuxtjs.org/