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:

• 1. render the data where it is located and send a fixed-format image to the recipient;
• 2. encapsulate the data with a rendering engine and send both to the recipient;
• 3. 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.

簡單來說一個分散式多媒體架構不外乎三種架構：

1. 把資料繪製成圖片（或 HTML）傳給前端
2. 把資料和渲染引擎都丟給前端，讓前端照著這個引擎來渲染
3. 把原始資料和描述的後設資料都丟給前端，讓前端自己決定要怎麼渲染

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 爬下來的結果。

本篇文章同步發表在 Noob's Space。