靜態網站(Static websites)

由HTML、CSS、JavaScript創建的網頁組成。
每個頁面都是一個單獨的HTML檔案,直接由伺服器傳送到用戶端。

• 建立快、部屬簡單：將檔案放置到伺服器即可發佈。
• 安全性較高：沒有資料庫與外部套件(攻擊的常見入口點)。
• 複雜度低：不需要連接到資料庫。

優點:

• 頁面加載速度快：伺服器只需傳送檔案(比動態網頁快速)。
  • 頁面加載速度是谷歌評估網站性能的關鍵部分。
    (對SEO和排名性能有影響)
• 架構簡單：適合小型網站、作品集。
  • 網頁以預先製作完成,無需從數據庫找資料或在server side script做驗證等工作。

缺點:

• 缺乏的擴展性：要建立大量頁面時效率低。
• 無法個人化：沒有資料庫,無法針對每個使用者提供客製化的內容。
  • 資料庫(儲存使用者資訊的數據)
• 管理效率低：需要逐頁編輯,隨著頁面更多,大量更新快速變化的內容耗時。

動態網站(Dynamic websites)

使用伺服器腳本(server-side script)與資料庫。
頁面內容可根據用戶行為與即時資料動態生成。

• 即時變化：每個人Youtube首頁顯示的推薦影片都不相同。
  (透過數據庫中的觀看紀錄、習慣、訂閱內容)
• 互動性高：適合需要大量用戶參與的網站。
  (架設一個房地產網站,需生成數百個頁面來列出數百個房市資訊,
  頁面內容反映即時可用資訊)

使用情境

• 電子商務(Amazon、Shopee)
• 社群網站(Facebook、Instagram)
• 在線論壇(PTT、Reddit)
• 串流影音平台(YouTube、Netflix)

優點:

• 維護快速：內容由資料庫集中管理,不需逐頁修改。
  • 每個網頁的製作依賴伺服器端腳本(server-side script)來抓取資訊且生成網站。
• 可擴展性強：適合逐步擴展為大型網站。
  • 若一開始沒有計劃建立一個大型網站,動態網站的架構可以在必要時擴展。
• 更好的用戶體驗：能提供個人化與互動式的內容。
• 功能更強大：伺服器端腳本可用演算法來增加網站功能。

缺點:

• 建置成本高：需要資料庫與伺服器設定。
  • 需更多資源建立並設立數據庫,連接到正確頁面,動態網站設置和運行,成本更高。
• 效能負擔大：不斷從數據庫提取信息以顯示網頁內容需要時間處理和執行。
  • 動態比靜態網站有更多處理指令。

參考資料

• MDN Ｗeb Docs
• Udemy 2025網頁全端課程
• Lidemy課程