前言

轉職後的第二份工作終於是有用到框架的，但剛進去就聽到Nuxt、Pinia…這都是些啥，它們都是做什麼的呢，以下筆記：

SPA

SPA框架 - 單頁應用 - (Single-Page Application)

說明

• 是一種 Web APP 開發實作、網頁應用程式或是網站的模型。
• （看名字SinglePage可以想像跟單個頁面有關係。）
• 使用網站時能夠只使用一個頁面(像是不需要很多HTML檔)，要換頁面時是利用動態更新部分網頁內容(例如寫JS、發API請求)。

優點

因為不用從伺服器載入全部的頁面，所以能提升網站性能以及使用者體驗。

缺點

以SEO的角度來看，處於較劣勢。因為返回給搜尋引擎的檔案中可能只有一些節點，而不是完整的內容，會不易於爬蟲。

舉例

現在最常聽到的SPA應該就是前端框架，Vue、React、Angular …。

SSR

SSR框架(Server Side Render)

說明

• 前端顯示的HTML來源會是一個完整的檔案，換一個頁面，就需要刷新網頁

優點

與 SPA 相反地，因為每個檔案中有完整的內容，所以對於 SEO 較有利。

缺點

更換頁面時，前端都需要被回傳一個檔案，代表對伺服器的負擔比較大，換頁面時也比較有卡頓的可能。

舉例

在一個專案中會有許多HTML檔（代表每個頁面），而不是用很多元件組合成一個頁面的那種作法。

Nuxt

經常會看到跟 Vue 一起使用的 Nuxt，與這兩種網頁渲染方法有關係，我們經常會說 Nuxt 就是 SPA + SSR。

說明

• 首次載入畫面時，用SSR模式，跑完這次SSR，往後的請求都以SPA進行。
• 能保留 SPA 及 SSR 的優點
• 雖然好，但在製作專案前，還是得評估使用此框架的必要性。

渲染方式

在 Nuxt 中，會基於 Vue 的組件去渲染成 HTML。另外也可以利用異步函數，動態產生頁面。

打包

Nuxt 會依據 pages (目錄檔案？) 中所寫的結構，幫你自動生成路徑(routing)，並打包成靜態的文件。

參考

SPA https://developer.mozilla.org/zh-TW/docs/Glossary/SPA

今天就到這，如有說明不周或錯誤的地方，還請多留言討論(鞠躬)。