近年來SPA在前端已是非常火紅的名詞，英文全名是Single Page Application，中文叫做單頁應用程式，即使你不了解它，應該也聽過一些。

與SPA相遇之前

記得在以前進行網頁開發時，總是習慣建立一個HTML檔，裡面寫了滿滿的CSS和HTML程式碼，看著長長一串code就覺得很有成就感(?)。但隨著頁面越來越多，發現維護也開始變麻煩了，今天改這邊，明天又改那邊，這麼長一串也不好找到要改的地方，結果反而花最多時間的是維護。後來接觸了PHP，開始把共同用到的程式碼做輸出搭配引入來使用，雖然管理有比較好些，但終究還是得透過伺服端來運行。就這樣一直想著前端有沒有更好的開發方式，直到聽見了一個名詞：MVC。

什麼是MVC? SPA又是什麼?

翻閱維基百科，MVC模式（Model–view–controller）是軟體工程中的一種軟體架構模式，把軟體系統分為三個基本部分：模型（Model，負責處理並給予資料）、視圖（View，使用者可見的設計畫面）和控制器（Controller，接收請求並處理），是屬於分離開發的模式，除了能夠提昇維護易用性，也適合多工開發。SPA顧名思義叫做單頁應用程式，主要是在載入主頁面時，預先載好所有前端畫面的程式，利用前端的特性，可以讓網址路徑切換並做出換頁的效果，不必向伺服器重新發送Request。關於更多的介紹，在此推薦huli的文章前後端分離與 SPA。我們後面也會用實例來做示範，故這邊先不多做贅述。

與傳統網站開發差別在哪?

這就要說到server side render和client side render是怎麼運作的。在前端技術尚未發達時，一個有規模的網站，通常會有許多網頁檔案，當我們要造訪一個頁面，會經由一串網址向伺服器請求對應的檔案(Controller)，由後端抓取資料(Model)，並同時結合在視圖(View)，處理後再將結果傳回前端，然後變成你所看到的畫面，這是server side render；而SPA在造訪頁面也會使網址產生變化，差別在用前端處理Controller，經由路由(router)找到對應的畫面(View)，不需經由後端，資料模型(Model)則可以使用非同步方式向伺服器進行請求，取得資料後，再渲染到畫面，這就是client side render。而SPA正是屬於後者，透過前端使網址產生變化，並且不用重新整理頁面，達到換頁的效果，是不是很帥呢?

結尾

因應現今多元的開發模式，網頁也能夠像是一個封裝程式，搭配HTML5 API與同步/非同步的操作，可以幫助絕大多數用戶帶來更好的使用體驗。相信聽了上述的介紹，應該能理解一些，若還是不太了解沒關係，本系列文章目標會從基礎開始，由淺入深，讓各位瞭解實際運作是如何一回事。