# Explain what a single page app is and how to make one SEO-friendly.
*[SSR]: Server-Side Rendering
*[CSR]: Client-Side Rendering
*[SPA]: Single Page Application
*[MPA]: Multi Page Application

## 什麼是 SPA (單頁式應用)？
早期的網站都是以靜待網頁/多頁式網頁 MPA 為主， ==從Server端渲染好網頁程式(HTML)，再傳送到client端== ，當使用者點擊到其他頁面或是導航到其它 URL 時，網頁整個頁面會刷新，server會為新頁面發送新的 HTML，這也就是 SSR 伺服器渲染.

2004年Gmail問世，Gmail 充分利用了瀏覽器的 XMLHttpRequest，透過這個 API 送出 Request，再透過 JavaScript 變更目前畫面上的內容！就不會造成網頁整個刷新了！（其實就是之前談到的AJAX技術帶來的改變～前端分擔了伺服器端的工作，降低了伺服器的運算效能消耗及資料吞吐量，伺服器端 MVC 中 View 的部分，交給了前端來處理，取得資料、處理畫面、頁面跳轉...等等，讓網站使用像是使用應用程式一樣流暢）

網頁應用程式Web Applicaiton/單頁式網頁 SPA 開始崛起， CSR 客戶端渲染取而代之，==程式傳送到Client才產生HTML==，所以一開始Client收到的HTML，只有一些網頁的基本架構(如下圖)，主要的實際內容要由js檔去取得，瀏覽器需要下載大量 JavaScript 檔案後，才計算、渲染畫面，導致首次訪問網站時需要較長的反應時間，好處是後續的網頁互動會很快。


回到首次訪問網站時，只下載一個沒有實際內容的架構，導致搜尋引擎的爬蟲爬到的也只是一個空殼，SEO面臨了極大的挑戰！

:::warning
SSR 跟 CSR 的主要差別在於網頁是在哪裡被渲染的
:::
### SSR vs CSR
#### Server-Side Rendering
* 傳統網頁渲染的方式，從Server產生HTML後，再傳送到Client。
* 頁面由伺服器產生，每次更新頁面都需要全畫面重新渲染。
* 伺服器取得資料後，需要計算畫面並整頁送出，運算及流量的負荷都太大。

#### Client-Side Rendering
* Modern web的網頁開發框架主要是以CSR為主，通常是SPA的網頁開發框架。
* 程式傳送到Client才產生HTML，所以一開始Client收到的HTML，幾乎是一張白紙，只有進入點（root）。
* SPA藉由先傳送程式碼到Client，來增加Client瀏覽網站的流暢度，在某些情境可以加速載入。


SSR網站更快的渲染，而CSR有一段空白在下載檔案
SSR檔案大，CSR回覆更快（這個範例出於某種原因主頁除外）

## CSR的SEO問題?
### 對html做設定..
html架構是會被讀取到的，所以我們可以在html設定,meta標籤,網頁分享的og (open graph),Keywords,壓縮圖片大小、loading 速度,JSON-LD(JavaScript Object Notation for Linked Data)等等等
[SEO Site ckeckup](https://seositecheckup.com/)
[如何加強網站的SEO - 基礎篇](https://blog.yyisyou.tw/5ac95a76/)
[如何加強網站的SEO - 進階篇](https://blog.yyisyou.tw/68015a49/)

### Isomorphic ( universal ) JavaScript 同構/通用的JavaScript概念

由於要達到SSR效果的目的是為了要讓Search engine讀懂網站的內容是什麼，並非真的要產生網站給Search engine使用，因此只要先寫好Client和Server共用的程式碼，並且在Server就把Client-side的程式碼跑過一遍，就可以達到目的了。
講白一點就是只會render一半，再傳給Client進行完整render的動作，因此流暢度也有明顯的提升。雖然是半殘的SSR，但是為了方便，其實很多人還是會直接叫SSR，而不會叫同構，這是為了方便溝通而稱呼的。

缺點就是開發技術含量很高，不止需要處理Client和Server的程式碼，還要了解Webpack的相依套件如何處理Server渲染的問題。
也就是第一畫面為 SSR，其他畫面是 CSR
### SSR 框架(Next,Nuxt)
在這樣的概念出來後，前端框架的 SSR 框架就出來了！也就是React的Next 或 Vue的Nuxt，是原本前端框架的語法再擴充，讓原先就熟悉框架的開發者，只需要越過相對小的進入門檻，就能滿足第一頁 SSR 的需求。
### Prerender 之類的工具
在一些資料相對簡單，變動不太大的網站，也可以選擇透過例如 Prerender 之類的工具，是先把網頁全部算好，儲存成靜態頁面，這樣也可以解決 SEO 的問題。

#### 參考文章：
[ 為什麼網站要做成 SPA？SSR 的優點是什麼？](https://medium.com/schaoss-blog/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%8D%81-18-fe-%E7%82%BA%E4%BB%80%E9%BA%BC%E7%B6%B2%E7%AB%99%E8%A6%81%E5%81%9A%E6%88%90-spa-ssr-%E7%9A%84%E5%84%AA%E9%BB%9E%E6%98%AF%E4%BB%80%E9%BA%BC-c926145078a4)
[如何加強網站的SEO - 基礎篇](https://blog.yyisyou.tw/5ac95a76/)
[如何加強網站的SEO - SSR與CSR篇](https://blog.yyisyou.tw/ff55dd91/)
[SPA和MPA網站區別，SEO優缺點剖析，甚麼時候該用那個?](https://www.leunghoyin.hk/spa-vs-mpa)
[SSR vs CSR](https://dev.to/alain2020/ssr-vs-csr-2617#:~:text=the%20first%20request.-,the%20difference,client%20requests%20a%20different%20route.)
[A Closer Look at Client-Side & Server-Side Rendering](https://www.growth-rocket.com/blog/a-closer-look-at-client-side-server-side-rendering/)
[The Benefits of Server Side Rendering Over Client Side Rendering](https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8)
[說說SEO相關的話題，SPA單頁面對於SEO的優化的問題以及解決方案](https://kknews.cc/zh-tw/code/22gap5z.html)
[[IT 鐵人賽] 為何我不用 SSR？ Day 18](https://blog.hinablue.me/2019-ithome-ironman-day-18/)
[搜尋引擎最佳化 (SEO) 入門指南](https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=zh-tw)

### 補充： MPA vs SPA
#### MPA
* 內容代碼完整，搜尋引擎爬蟲就能夠輕鬆讀取網站內容然後放到適當的搜尋結果中，所以MPA對SEO友善
* 到新頁時網站會從頭到尾，整頁刷新一次，讓瀏覽器可以取得該新頁完整內容代碼
* 合適的網站：需要安全性較高，SEO是必需的應用。例如：部落格、電商平台網站、公司資料/產品網站

#### SPA
* 除了第一次是全頁下載，之後的都是部份更新
* 訪問高效、更高開發效率、更方便維護
* 第一次看SPA網站要下載東西比較多，所以速度較慢。往後網頁互動就會很快，因為請求的資料量很少。
* 由於內容代碼不完整，搜尋引擎不一定能讀取，就算能讀取，也不是能百份百讀取到，對SEO不友好。
* 合適的網站：即時反應速度要快的應用。例如：社交網站、網上聊天室、股票報價、後台管理系統