在 SPA 流行之前，前端主要是出現在 MPA (Multi Page App)裡的 template 的地方。這代表著當使用者進入一個頁面時，所有的資料和畫面基本上已經在 server side 就確定，並跟著頁面一同傳送過來。若使用者想要得到不同的資料，就必須到另一個頁面並且整個畫面會需要刷新。
事後補充一下，其實我想指的是「後端MVC」框架中的 V ，但其實這樣講也不太精確就是了畢竟 MVC 跟 SPA 也不是互斥的概念。
隨著 AJAX 技術的出現，前端可以透過動態請求來從後端取得資料，實現了前後端分離架構，也造就了 SPA 的興起。在 SPA 中，應用程式只需要載入一次，接下來的互動全部在頁面內進行，避免了頁面需要一直全部刷新，進而提高了使用者體驗。
如果讀者曾經接觸過對 SEO 分數或者載入速度有所要求的產品，應該能體會 SPA 的一些問題。
由於 SPA 的大部分資料都是等到 JavaScript 載入後才開始動作，理論上 SPA 的 HTML 文件在初次載入時幾乎沒有任何內容，這樣直到 JavaScript 渲染完成後畫面才會真正顯示出來，導致搜索引擎無法有效地對頁面進行 index。
雖然一些搜尋引擎說它們可以解析 JavaScript，但實際效果並不理想。
也因為 SPA 必須在初次渲染時載入大量的 JavaScript 檔案，進而導致 bundle size 較大，也就影響初次載入速度和頁面渲染時間。種種原因使得 SPA 很難在 SEO 優化方面獲得高分數。
為了解決 SPA 的一些缺點，SSR 可以讓使用者在發出請求後即時獲取完整 HTML 。當使用者進入網站時，伺服器會在後端產生 HTML並將其傳遞給前端，這樣使用者可以立即看到完整的畫面。與傳統的 MVC 模型不同的是，SSR 的頁面在加載後仍然可以使用 CSR（Client-side Rendering）來進行互動，這提供了更好的使用者體驗。
SSG 則是讓開發者在 build time 生成靜態 HTML 文件，這些文件可以在使用進入網站時直接獲得，使用者不需要每次都跟伺服器發出動態請求。可以讓網站擁有較好的性能，因為所有的內容已經事先準備好，無需等待後端生成頁面。
SvelteKit 是一個基於 Svelte 的全端框架可以把它想成 Next.js 之於 React 的關係，它同時支援 SSR 以及 SSG 這兩種方案，也內建了方便的 routing、data load 機制以及 API endpoint，讓我們可以非常方便且靈活地開發產品。
iThome鐵人賽
看影片追技術