# MPA, SPA, SSR, CSR
###### tags: `待補充` `Website`

:::info
早期的網站都是以 MPA 為主，但由於現在的時代人們非常看重使用者體驗（換個頁面都要等，使用者會生氣的），因此現在前端框架幾乎都是採用 SPA。捨不得 MPA 的理由就只剩下友善的 SEO 了。
:::

### MPA ｜ Multiple Page Application 多頁式應用
從 **==Server 端渲染 HTML 檔案（=SSR）==**，再傳送到 client 端 ，當使用者點擊到其他頁面或是導航到其它 URL 時，網頁整個頁面會刷新，server 會為新頁面發送新的 HTML。

### SPA ｜ Single Page Application 單頁式應用
- 2004 年 Gmail 問世，充分利用了 AJAX 技術，透過 XMLHttpRequest API 送出 Request，再透過 JavaScript 變更目前畫面上的內容，就不會造成網頁整個刷新了！
- 降低伺服器的運算效能消耗及資料吞吐量，使前後端分離。

為了有更好的使用者體驗，SPA 漸漸崛起，改由 **==Client 端（瀏覽器）渲染畫面（=CSR）==**。也就是讓 Client 端一開始收到的 HTML 檔案只會有一些基本架構，主要的內容會由瀏覽器下載 js 檔案後取得並渲染畫面。

:::warning
- 由於瀏覽器一開始需下載大量 JS 檔案，導致首次訪問網站時需要較長的反應時間，但後續的網頁互動會很快（**使用者體驗 👍**）。
- 由於主要內容都是瀏覽器下載而來，當搜尋引擎的爬蟲在初始訪問網站，爬到的就只是一個空殼。（**SEO 😭**）
:::

### SSR vs CSR

| | SSR | CSR |
| -------- | -------- | -------- |
| 全文 |Server-side Render | Cerver-side Render|
| **渲染位置** | **Server** | **Client** |
| 應用 | 多頁式網站（MPA） | 單頁式網站（SPA） |
| 初始畫面載入速度 | 👍👍 | 👍 |
| **SEO** | 👍 | 👎🏾 |
| **UX** | 👎🏾 | 👍 |

### SEO 問題
#### `<meta>`
- Canonical Tag 標準網址

<!-- <meta> charset 用來指定網頁內容是用什麼編碼 (character set)

<meta charset="utf-8">
螢幕設定
當在設計RWD網頁時，我們需要用 <meta> viewport 來指定瀏覽器怎麼渲染和縮放網頁畫面的寬高。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width 指定瀏覽器頁面的寬度同裝置 (device) 的寬度
initial-scale=1.0 指定畫面初始縮放比例為 100%，即不放大也不縮小
user-scalable=no，禁止用戶手動縮放網站，設定範圍：1(yes) / 0(no)
minimum-scale=1，設定網站最小的縮放大小，設定範圍：0.25 ~ 5
maximum-scale=1，設定網站最大的縮放大小，設定範圍：0.25 ~ 5
搜尋引擎
<meta> robots 標記針對特定網頁控管應如何將各個網頁納入索引並顯示在搜尋引擎的 (Google) 搜尋結果中。

<meta name="robots" content="index, follow">
index: 在搜尋結果中顯示這個網頁
follow: 追蹤這個網頁上的連結
all: 預設值，等同於 index, follow
noarchive:告訴google不要保存含此標籤的網頁的快照
自動跳轉網頁
<meta> refresh 可以用來設定幾秒鐘後跳轉 (redirect) 到某一個 URL

<meta http-equiv="refresh" content="5; url=https://www.example.com">
上面例子會讓網頁在載入 5 秒後，自動跳轉到https://www.example.com
如果設定content=“0”，對搜尋引擎來說就是 301 永久轉址的意思。參考這篇 Answers to the SEO Professional’s Litmus Test 第二點說明。

<meta http-equiv="refresh" content="10">
如果不加 url 參數則是定時刷新頁面(指定每 10 秒就重整頁面一次)

網頁基本設定
<title>網頁標題</title>
<meta name="description" content="網站描述">
<meta name="keywords" content="關鍵字1, 關鍵字2, 關鍵字3">
title:網頁標題在 Google 搜尋引擎中顯示55-64 個字元，建議 60 字元以內
keywords:搜尋此網站的關鍵文字（可用半型空格或逗點隔開)
description:定義網站摘要，通常會出現在搜尋頁中的網站內容描述，建議 160 字以內
Google SEO已經不看 meta keywords 的內容了，你可以將關鍵字放在 meta description 中。

The Most Important Meta Tags For SEO in 2021

rel=“canonical” link 標記

外部連結分享設定
<!-- 給 FB 看的屬性標籤 -->
<meta property="og:title" content="標題">
<meta property="og:description" content="描述">
<meta property="og:image" content="https://XXXX.com/image.jpg"
(網站預覽圖的 url)( url 一定要使用絕對路徑)(建議尺寸 1200x630)>

<!-- 給 Twitter 看的屬性標籤 -->
<meta name="twitter:title" content="標題">
<meta name="twitter:description" content="描述">
<meta name="twitter:image" content="https://XXXX.com/XXXX.jpg">

fb網站管理 -->