iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
2
Modern Web

30 天 Progressive Web App 學習筆記系列 第 4

Day 04 - 30 天 Progressive Web App 學習筆記 - Client render & Server render

為什麼要講 Client render & Server render?

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


靜態網站

圖片來源:digett

傳統的網站,是單純的靜態網頁,每個頁面由 HTML、CSS、Javascript 所組成,網站有幾頁就有幾個 HTML 檔案,在 A 頁面點擊 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。謝謝

上一篇
Day 03 - 30 天 Progressive Web App 學習筆記 - 什麼是 PWA?
下一篇
Day 05 - 30 天 Progressive Web App 學習筆記 - 什麼是 App Shell?
系列文
30 天 Progressive Web App 學習筆記30

1 則留言

0
JerryHong
iT邦新手 5 級 ‧ 2016-12-20 02:43:06

加油 一定要撐下去啊!!!!

我要留言

立即登入留言