搞懂網頁技術名詞：MVC、SPA、SSR、AMP 及 PWA
更新於 發佈於 閱讀時間約 3 分鐘
為了增進使用者體驗，前端愈來愈複雜，現在就讓我們一起搞懂網頁技術名詞。
MVC：
一種設計模式，目的是將雜亂的程式碼分開以好維護。原理是將任何與資料有關的操作都放到一個叫做 Model 的地方、所有跟顯示畫面有關的東西都放到 View，並在 View 裡面用一個 template 來放入資料。
當 Controller 接收到請求與參數，就會轉交給 Model 處理，Model 接收到參數後，再將結果通知 View，View 具有監視 Model 的行為，會以此將結果顯示。
SPA：
單頁式應用（Single Page Application），利用 AJAX 非同步的特性跟後端同步資料，將不同的資料動態輸向同一個頁面，達到網頁操作不換頁。
缺點一是少了後端的渲染回傳，如果使用者操作太快，前端就不能保證每次都能得到正確的 Server 資料（點進電影 A → 快速按上一頁 → 快速點進電影 B → 畫面顯示電影 A 資料）。
缺點二是因為內容由 JavaScript 動態產生，在遊覽器載入並且執行 JavaScript、等 Response 回傳後才會看到畫面，因此有較差的 SEO。
SSR：
伺服器端渲染（Server side render）。為避免 SPA 讓 SEO 變差，先渲染網頁內容，再將後續操作交給 JavaScript，雖然使用者一樣能享受到 SPA 不用換頁的好處，不過首次加載的時間增加了，在 SSR 的開發上也要需要會一點後端技術。
AMP：
加速行動網頁（Accelerated Mobile Pages）。由 Google 推出，目的是透過格式的優化和 Google 引擎的快取，提升行動裝置網頁的載入速度。因為網頁速度會影響 SEO 排序，所以使用 AMP，SEO 排序也會提高。
缺點是網站被 AMP 優化後，網站已經變為 Google 快取網頁，除了不容易回到原始網站，也有流量被 Google 吸走的疑慮。
PWA：
漸進式網頁應用程式（Progressive Web App）。為增進使用者體驗，讓網頁不再只是網頁，而是要用起來像個 App，看起來也像個 App。除了讓網頁得到安裝、推播等其他功能，甚至利用Skeleton 先把畫面的骨架顯示出來，以及用 Service Worker 搭配快取，在沒有網路時也能夠使用部分功能。
PWA 能帶給使用者更好的網頁瀏覽體驗是無庸置疑的，和 App 相比，不需要安裝、不佔手機空間，也不需要頻繁的更新。
參考資料：
感謝您的閱讀，我試著將生活與自己所學到的知識，以平易近人的方式傳達給正在努力進步的同好，甚至是領域之外卻有興趣的人。如果喜歡我的文章，歡迎贊助我，你的鼓勵也是我進步的動力。
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
此篇主要紀錄PWA開發過程心得，內容為PWA有什麼特色，為何React可以使PWA成為接近App的操作體驗，以概念敘述與簡單開發流程紀錄來介紹PWA。
什麼是漸進式網路應用程式(PWA)
PWA擁有傳統網頁和移動應用的優點，使網頁應用程序可以像應用程序一樣運行，提供更加優越的用戶體驗
響應式網頁設計（Responsive Web Design，簡稱RWD）是一種設計和開發網頁的方法，旨在使網站能夠根據不同設備和屏幕尺寸的大小，自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗，無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
CSR（Client Side Rendering）是一種將渲染資料的過程交由瀏覽器端處理的方法。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
本文紀錄了MVC和MVVM的差異，包括各自的優缺點和最大差異，並討論了MVVM的商業邏輯應該寫在哪的問題。
本節課程將介紹 MVVM 架構的概念和優點。MVVM 是 Model-View-ViewModel 的簡稱，是一種分離資料、介面和邏輯的設計模式。透過 MVVM 架構，您可以提高程式碼的可讀性、可測試性和可維護性。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
此篇主要紀錄PWA開發過程心得，內容為PWA有什麼特色，為何React可以使PWA成為接近App的操作體驗，以概念敘述與簡單開發流程紀錄來介紹PWA。
什麼是漸進式網路應用程式(PWA)
PWA擁有傳統網頁和移動應用的優點，使網頁應用程序可以像應用程序一樣運行，提供更加優越的用戶體驗
響應式網頁設計（Responsive Web Design，簡稱RWD）是一種設計和開發網頁的方法，旨在使網站能夠根據不同設備和屏幕尺寸的大小，自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗，無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
CSR（Client Side Rendering）是一種將渲染資料的過程交由瀏覽器端處理的方法。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
本文紀錄了MVC和MVVM的差異，包括各自的優缺點和最大差異，並討論了MVVM的商業邏輯應該寫在哪的問題。
本節課程將介紹 MVVM 架構的概念和優點。MVVM 是 Model-View-ViewModel 的簡稱，是一種分離資料、介面和邏輯的設計模式。透過 MVVM 架構，您可以提高程式碼的可讀性、可測試性和可維護性。