---
title: 靜態網頁vs動態網頁vsSPA
tags: tutorials
disqus: hackmd
---

# 網頁發展歷史 : 靜態網頁、動態網頁、SPA

學習重點名詞 : 靜態網頁、動態網頁、SAP

## 1. HTML靜態網頁時期

:::info
過去++伺服器++端只需一個++HTML檔++即可完成一個靜態網頁，
++使用者++只要透過++伺服器的網址++拜訪到伺服器，
即可拿到這份HTML檔回使用者本機，
最後透過本機上的++瀏覽器++把HTML檔轉譯成DOM元素並渲染在網頁上。
:::

:::spoiler 註解
上方的敘述，針對完全沒有網頁基礎的人，我用一個比喻來說明。

++伺服器++就像中央圖書館
++HTML檔++就像CD光碟
++使用者++就像要借閱CD的人，這裡是指你就是那個要借閱的人
++伺服器的網址++就像中央圖書館的地址
++瀏覽器++就像你家的CD Player

今天你想要去中央圖書館借閱一片CD並聽取裡面的資訊內容，
你必需知道中央圖書館的地址到現場拿這一片CD回到家中，
用CD Player播放後得到他裡面的資訊。

這樣一趟資料傳輸的行為邏輯，
共有五個不可或缺的元素(HTML檔、伺服器的網址、瀏覽器)
與角色(伺服器端、使用者端)。
▲
:::
<br>

此時使用者呼叫Server後拿到html檔，就不會再跟Server有互動了，若你點擊這張html裡的「連結」就算進入下一個循環，重新呼叫Server拿新的html檔。

這個時期html檔叫做靜態網頁,代表這張網頁內都是固定的html內容，拿到這份html就不會再跟Serve有互動了，直到你要再拿另一份全新的html檔才會呼叫Server。

## 2. HTML+JavaScript+CSS 靜態網頁時期

:::info
這個時期伺服器端多寫了JavaScript和CSS兩份檔案，完成一個進化版的靜態網頁，
當使用者透過網址呼叫時，會得到JavaScript、CSS、HTML三個檔案。
此時的JavaScript和CSS語法是用於控制HTML檔轉譯後的DOM元素的特效和美編的。
:::

下圖是拿到HTML後，JS與CSS如何作用最後渲(Paint)成網頁的過程。

<font color="#f00">這邊要知道的重點是JavaScript和CSS是去控制HTML檔轉譯後的DOM元素，不是去改HTML的內容喔!</font>

[[延伸閱讀]渲染路徑](https://ithelp.ithome.com.tw/articles/10226590)

## 3. 動態網頁時期

:::info
動態網頁就是「我所請求的網頁有被 Server 『處理』過」，而靜態網頁就是「我所請求的網頁沒有被 Server 『處理』過」。而動態網頁不會是html檔，ex:cshtml檔、php檔....等。
:::

舉歷來說 :
在寫ASP.NET Web的時後，你會建立cshtml檔，這個檔案不是html網頁，但類似html網頁，差別在cshtml檔會經過server處理編譯後才轉成html並吐給使用者。
cshtml檔裡面以@開頭的Razor語法，在傳給使用者前會先被Server處理過，

下方就是一個在cshtml檔裡寫Razor的例子
當cshtml經過Server處理跑if那邊的程式碼後，使用者看到的是

但如果今天cshtml沒有經過Server處理，使用者看到的會是

由此可知動態網頁是網頁經過Server處;
而靜態網頁就是直接把網頁當成static html來解析成文字檔

[[延伸閱讀]用php來解釋動態網頁](https://blog.huli.tw/2019/09/18/spa-common-problem-about-router/)

## 4. [補充] 什麼是 Single Page Application

靜態網頁時期，我們呼叫Server得到一張html，當我們要其他資訊，我們就會需要在透過另一個連結拿到另一張html，「整頁」再重新渲染。

**後來javascript ajax技術出現**，破解了『當使用者呼叫Server時，Server只能回傳html』這樣的行為束縛，變成『當使用者呼叫Server時，Server不只可以回傳html，也可以回傳JSON格式的資料』。

ajax技術使得我們行為模式有另一種選擇，我們需要什麼資料，我們透過ajax技術去跟Server要JSON資料就好，要到資料後，再「局部渲染」在原本使用者所在的html上，這樣我們就不用像以前為了要拿到其他資料要花時間等待整頁html重新渲染。之前我們需要「換頁」才能得到的其他不在這張靜態html上的資訊，現在我們撈取不同資料，在同一頁面上就能完成，因此叫Single Page Application。

另外我認為SPA是動態網頁也可能是靜態網頁，SPA與html是否被Server處理過這個議題無關，只要是有使用javascript ajax技術就都算是SAP

[[延伸閱讀]SPA是什麼?](https://ithelp.ithome.com.tw/articles/10160709)

[[延伸閱讀]為什麼我做的SPA放在GitHub Pages上就壞掉了?
因為你做的是動態網頁SPA，但GitHub Pages並不會幫你建一個Server去處理動態網頁， 一般來說GitHub Pages都是用於發佈靜態網頁，如果你做的網頁是靜態的且有使用到ajax去呼叫別的Server提供的api，這樣的靜態網頁SPA就可以發佈到GitHub Pages](https://blog.timtnlee.me/post/development/spa-on-github-page)

---

###### tags: `tutorial`