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;
    1. encapsulate the data with a rendering engine and send both to the recipient;
    1. 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 爬下來的結果。

本篇文章同步發表在 iT邦幫忙