Web
SSR, CSR, SSG
MPA + Traditional SSR
- MPA (multi-page application): 一個內容對應到一個頁面 = 一個 html
- SSR (server side render): server 執行完 js 渲染完 html 後才傳給 client
- 每次更新/換頁面都要重新和 server 拿 html，server 處理太久或網路太爛就會導致 client 端出現空白頁面
- 也會有閃爍的問題 (因為是直接換一個 html)
- SEO 較好，因為 client 拿到的是完整的 html，搜尋引擎更容易做 index
SPA + CSR
- SPA (single page application): 所有內容都由同一個頁面呈現
- CSR (client side render): client 跟 server 拿 js 跟空白的 html，然後在 client 端渲染 html - react, vue 等工具就是一種 CSR 的實現，讓我們可以利用 js 來改變 UI 而不是換一個 html
- 需要不同內容時只要執行 js 來更新頁面上的元件就好
- 首次載入時需要執行一大包 js 所以會比較久，不過後續的更新就比 MPA+SSR 快因為不需要等 server 重新渲染完整的 html
- SPA 本質上是沒有多個頁面的，所以在 navigate 時並不是透過瀏覽器重新載入 html 而是透過特定的 router 來進行，url 雖然變了但其實只是透過 js 更新內容而已
- 所以換頁比 MPA 絲滑
SPA + SSR/SSG
- 基本上現在提到 SSR 都是這種形式
- 只有在首次載入時採用 SSR，server 會提供完整的 html，而後續更新則是利用 react, vue 這些工具來在 client 端渲染、更新頁面 (這個動作就是 hydration)
- 也就是說除了首次載入和呼叫 API 之外，幾乎不會再跟 server 互動
- SSR 和 SSG (static site generation) 都是 pre-render 的技術，不過渲染 html 的時機不一樣
- SSG 在一開始 build 的時候就渲染完成，不管什麼 request 都是回傳同個 html，所以可以被 cached
- SSR 則是每個 request 都會重新渲染新的 html
Hybrid
其實現在多數的框架，不管是 Next, Nuxt, Astro 都不是採用上面任一種，而是混合了各種模式 (待補)