Client-side Render 和 SSR 的差別
Client-side Render 和 Server-side Render 在實作起來究竟有什麼差別？Debug 時有什麼不一樣，對 SEO 又會有什麼影響呢？
Client-side Render 和 Server-side Render 在實作起來究竟有什麼差別？Debug 時有什麼不一樣，對 SEO 又會有什麼影響呢？
Client-side Render 和 Server-side Render （以下簡稱 CSR、SSR）最主要的差別，就在於有了資料後要在前端渲染還是在後端渲染。在一篇論文《Architectural Styles and the Design of Network-based Software Architectures》（RT Fielding, 2000）中提到：
A distributed hypermedia architect has only three fundamental options:
- render the data where it is located and send a fixed-format image to the recipient;
- encapsulate the data with a rendering engine and send both to the recipient;
- send the raw data to the recipient along with metadata that describes the data type, so that the recipient can choose their own rendering engine.
簡單來說一個分散式多媒體架構不外乎三種架構：
- 把資料繪製成圖片（或 HTML）傳給前端
- 把資料和渲染引擎都丟給前端，讓前端照著這個引擎來渲染
- 把原始資料和描述的後設資料都丟給前端，讓前端自己決定要怎麼渲染
CSR 和 SSR 的差別
這也影響到了後來的 CSR 和 SSR。如果你使用像是 PHP 的語言，通常你會寫出類似這種東西：
<ul>
<?php
$data = mysqli_query($link, "SELECT * FROM ARTICLE LIMIT 5");
while ($row = $data->fetch_assoc()) {
echo '<li>' . $row['title'] . '</li>';
}
?>
</ul>
而這個屬於 SSR 的一種，因為他會在 Server-side 就先渲染成 HTML，前端打開檢查原始碼只會看到：
<ul>
<li>API 實作(一)：規劃 RESTful API 要注意什麼</li>
<li>API 實作(二)：以 Koa 實作 RESTful API</li>
<li>API 實作(三)：以 Postman 測試 API</li>
<li>API 實作(四)：實際串上 MongoDB 資料庫</li>
<li>API 實作(五)：用 DevTools 查看 HTTP 封包</li>
</ul>
另外如果你用 CSR 的話，通常你會傳一包 JSON 資料給前端，例如這樣：
[
{"title": "API 實作(一)：規劃 RESTful API 要注意什麼"},
{"title": "API 實作(二)：以 Koa 實作 RESTful API"},
{"title": "API 實作(三)：以 Postman 測試 API"},
{"title": "API 實作(四)：實際串上 MongoDB 資料庫"},
{"title": "API 實作(五)：用 DevTools 查看 HTTP 封包"}
]
再由前端決定怎麼用 JavaScript（jQuery、React.js 等）去繪製成 HTML，甚至是視覺化的圖表（Chart.js、D3.js）等等。
如何知道是 CSR 還是 SSR
如果你正在修改前人的專案，在理解龐大的專案架構之前，有時候只要知道他是 CSR 還是 SSR，就比較知道怎麼去修改。例如如果是 CSR，就有比較大的機率要從 JS 端去修改；如果是 SSR，就有比較大的機率要改 PHP、Python 檔案等等。而透過 DevTools 就可以很清楚看到後端丟過來的每個 response 究竟是原始資料，還是已經渲染好的結果。
SSR 對 SEO 才好？
如果你是用 React.js、Vue.js 等框架在做網頁的話，預設他都是 CSR，所以從查看原始碼就可以看到空白一片，一切都是在前端渲染完的。如果你是寫爬蟲去讀的話，應該會拿到空白畫面，所以搜尋引擎應該也是拿到空白畫面，搜尋引擎其實無法讀懂你的畫面。
SEO 是 Search Engine Optimization 的縮寫。如果讀到這裡你還不太懂 SEO 的話，簡單來說就是要讓搜尋引擎收錄你的網頁，並且讓搜尋排名好一點。SSR 會 SEO 比較好的意思是：畢竟你要讓搜尋引擎的爬蟲看得到內容他才能幫你收錄，對吧？
不過其實不太需要擔心這個，因為搜尋引擎龍頭 Google 最近已經採用新技術下去做爬蟲，在官方文章〈The new evergreen Googlebot〉 有提到，Googlebot 會開始改用 Chromium 74 以後的版本，所以不只可以支援 CSR，也能確保爬蟲能夠看懂 ES6 語法，順利渲染前端畫面。雖然有些人還是對 CSR 的 SEO 有些疑慮，覺得爬蟲的機制沒有那麼開放透明，但我個人認為 CSR 沒問題，可以到 Google 的 Search Console 提交網址看看 Googlebot 爬下來的結果。
本篇文章同步發表在 iT邦幫忙。