為什麼要講 Client render & Server render？

希望能夠藉由說明 Client render 和 Server render 來觀察網站的演進過程，
更深度的了解 PWA 誕生的原因。

靜態網站

圖片來源：digett

傳統的網站，是單純的靜態網頁，每個頁面由 HTML、CSS、Javascript 所組成，網站有幾頁就有幾個 HTML 檔案，在 Ａ 頁面點擊 B 連結，會整頁閃一下，去要整份 HTML 檔案回來，再置換成 B 頁面。

但是當你網站內容越來越多的時候，要管理一堆 HTML 檔案，假如 HTML 有 100 頁，裡面共同使用到的 LOGO 圖檔要修改，就必須每頁都要改，於是後來出現了動態網站。

Server render

圖片來源：digett

網站的生成是透過在 Server 的程式，這隻程式會根據網址回傳給我們不同的頁面，可以在同一個頁面呈現不同的內容。

這種生成的過程就是 Server render，而這種 Server render 的網站就是動態網站。

例如：有很多篇 blog 的文章，雖然是同一個頁面、但可以呈現不同的內容，不需要再像傳統的網站，有 100 篇 blog 文章，就必須重複做 100 個 HTML 檔案。

靜態網站是回傳靜態檔案，但動態網站是直接進到在 Server 裡的程式（後端程式），執行後端程式之後，程式會去 parse URL，依照 URL 決定去回傳什麼頁面。

在 Server 裡透過路由規則，向 DB 撈對應的資料，獲得資料之後，再用 Template engine (例如：Node/EJS、Jade，PHP/Laravel，Ruby on Rails/ERB 等) 去產生 HTML，這份 HTML 就包含整個畫面上所有的資料。

但是隨著網站的行為越來越複雜，動態網站變得無法滿足需求。
例如:使用者沒辦法在瀏覽網頁時、邊聽音樂、邊看文章。

因為 Server render 的動態網站靠 Server 也是回傳 HTML，就會導致每按一頁就整頁重刷，
也就是說在 Client 環境裡，每點一下就就跳一個新的頁面，讓 Client 沒辦法做連續性的行為，有些需求就無法執行，為了解決這個問題、後來就出現了 SPA。

全站 Client Render - Single Page Application(SPA)

圖片來源：clixlogix

以前收發 E-mail 必須透過電腦的應用程式來進行，例如 outlook 等軟體，但在 2006 年，google 推出了 gmail，
是一個 SPA 網站，功能就像是應用程式，體驗非常好，因為網頁好上手，網頁的可傳播性很高，不像應用程式還要安裝，在某些部分上是非常有優勢的。

像是 Spotify 在一開始推廣的時候也有做 SPA 網站，當使用者在搜尋音樂的名字後，直接點進去就可以聽、比起需要下載應用程式的方式還更容易推廣和傳播。

SPA 的關鍵技術是 AJAX，透過 Javascript 去發 request 回傳資料，再透過 Javascript 去改變頁面的內容。

頁面的呈現 DOM 的抽換，自己做的話就很難上手，後來出現像是 Backbone.js、Ember.js、Angular.js 等 SPA 的框架。

不過 SPA 也存在一些問題。
例如：

• 網頁在第一次載入會很慢
• Javascript 檔案過大
• SEO 優化問題

結語

PWA 也是為了解決 SPA 問題，希望網頁可以漸進成 app 保留網頁優勢又具有應用程式的體驗，把網站做得越來越好。

接下來，Day 05、要分享『什麼是 App Shell?』

本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝