搞懂網頁技術名詞:MVC、SPA、SSR、AMP 及 PWA

更新於 發佈於 閱讀時間約 4 分鐘

為了增進使用者體驗,前端愈來愈複雜,現在就讓我們一起搞懂網頁技術名詞。



raw-image

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 相比,不需要安裝、不佔手機空間,也不需要頻繁的更新。


參考資料:

MVC是一個巨大誤會

跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR

Google AMP懶人包:行動優先時代,1秒讓讀者愛上你


感謝您的閱讀,我試著將生活與自己所學到的知識,以平易近人的方式傳達給正在努力進步的同好,甚至是領域之外卻有興趣的人。如果喜歡我的文章,歡迎贊助我,你的鼓勵也是我進步的動力。

留言
avatar-img
留言分享你的想法!
avatar-img
Ray C的沙龍
37會員
31內容數
短篇奇幻作品將不定期更新。
Ray C的沙龍的其他內容
2023/01/14
在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文,聯想起先前在網上閱讀到關於 Pokémon API 的文章,一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中,發現連續抓取 905 份寶可夢資料...
Thumbnail
2023/01/14
在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文,聯想起先前在網上閱讀到關於 Pokémon API 的文章,一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中,發現連續抓取 905 份寶可夢資料...
Thumbnail
2022/04/03
去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣,那時雖然也試玩了一下,不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astr...
Thumbnail
2022/04/03
去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣,那時雖然也試玩了一下,不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astr...
Thumbnail
2022/03/25
2021 年可以說是 NFT 大爆發的一年了,除了名人相繼創立自己的 NFT,也有各式各樣的商業模式和額外賦能不停的被開發出來;像是主打邊玩邊賺的 (Play-to-Earn,P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
Thumbnail
2022/03/25
2021 年可以說是 NFT 大爆發的一年了,除了名人相繼創立自己的 NFT,也有各式各樣的商業模式和額外賦能不停的被開發出來;像是主打邊玩邊賺的 (Play-to-Earn,P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
伺服器端渲染(SSR)是一種在伺服器端渲染 HTML 頁面的技術。
Thumbnail
伺服器端渲染(SSR)是一種在伺服器端渲染 HTML 頁面的技術。
Thumbnail
每周一篇文章的讀書會心得報告摘要與筆記,本次分享文章為:Google搜尋排名推新制!媒體、出版業者海嘯第一排,SEO不再只重關鍵字。 1. Google搜尋排名推新制; 2. 網站核心指標:進站速度愈快、愈少用戶干擾、愈能讓用戶直接取得所需資訊 ; 3. 4點優化,讓SEO更靠前。
Thumbnail
每周一篇文章的讀書會心得報告摘要與筆記,本次分享文章為:Google搜尋排名推新制!媒體、出版業者海嘯第一排,SEO不再只重關鍵字。 1. Google搜尋排名推新制; 2. 網站核心指標:進站速度愈快、愈少用戶干擾、愈能讓用戶直接取得所需資訊 ; 3. 4點優化,讓SEO更靠前。
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
Thumbnail
當我們初步對搜尋引擎的運作模式有了概念之後,就進入到真正 SEO 實際操作的環節了。很多 SEO 網站都會把最佳化實踐放在SEO 技術,而並沒有花太多時間關注到網站本身的架構。 而從我個人的理念來說,我們應該要先搞懂架構,所以這一期,讓我們來說網站架構吧。
Thumbnail
當我們初步對搜尋引擎的運作模式有了概念之後,就進入到真正 SEO 實際操作的環節了。很多 SEO 網站都會把最佳化實踐放在SEO 技術,而並沒有花太多時間關注到網站本身的架構。 而從我個人的理念來說,我們應該要先搞懂架構,所以這一期,讓我們來說網站架構吧。
Thumbnail
一些技術的細節都會影響SEO優化的效果,哈利熊為大家整理了技術面的SEO優化方式!
Thumbnail
一些技術的細節都會影響SEO優化的效果,哈利熊為大家整理了技術面的SEO優化方式!
Thumbnail
從2018年開始,Google在網頁的排行上會更著重於網站的手機用戶體驗。這裡介紹針對手機SEO優化的一些小技巧及注意事項。
Thumbnail
從2018年開始,Google在網頁的排行上會更著重於網站的手機用戶體驗。這裡介紹針對手機SEO優化的一些小技巧及注意事項。
Thumbnail
為了增進使用者體驗,前端愈來愈複雜,現在就讓我們一起搞懂技術名詞。
Thumbnail
為了增進使用者體驗,前端愈來愈複雜,現在就讓我們一起搞懂技術名詞。
Thumbnail
說真的,你花了那麼多時間設計網頁,卻沒被搜尋引擎收錄,不是很可惜嗎? 所以接下來,我們就要告訴你,有關於「Technical SEO」的語法重點,讓你的網頁也能快速又有效率的被搜尋引擎收錄進去。
Thumbnail
說真的,你花了那麼多時間設計網頁,卻沒被搜尋引擎收錄,不是很可惜嗎? 所以接下來,我們就要告訴你,有關於「Technical SEO」的語法重點,讓你的網頁也能快速又有效率的被搜尋引擎收錄進去。
Thumbnail
良好的網頁設計有助於提升SEO,可以提供可互良好的品牌體驗,並且可以讓搜尋引擎有有效的抓取網頁內容,進而提升網站排名。
Thumbnail
良好的網頁設計有助於提升SEO,可以提供可互良好的品牌體驗,並且可以讓搜尋引擎有有效的抓取網頁內容,進而提升網站排名。
Thumbnail
這年頭的網站似乎可以清楚的分成兩類:一種是瞭解現今的行動趨勢、並且針對這個趨勢來做的設計;另一種則是仍在沿用15年前的樣子。今天,網站對於SEO(搜尋引擎最佳化)和跨載具的需求,早已和當年天差地遠,所以那些仍然沈睡在過去的網站,都已經到了該改頭換面的時刻了。
Thumbnail
這年頭的網站似乎可以清楚的分成兩類:一種是瞭解現今的行動趨勢、並且針對這個趨勢來做的設計;另一種則是仍在沿用15年前的樣子。今天,網站對於SEO(搜尋引擎最佳化)和跨載具的需求,早已和當年天差地遠,所以那些仍然沈睡在過去的網站,都已經到了該改頭換面的時刻了。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News