隨堂小考：SSR可以提升哪些指標的分數？

————————————————————————————————————————

（防雷用）

————————————————————————————————————————

沒錯，答案就是 LCP（最大內容繪製時間）和 CLS（累計版面配置位移）。

CLS（累計版面配置位移）應該比較好懂，由於SSR是把前後端程式都組好才送到Client端，因此大幅減少因為非同步載入時造成的位移問題。沒有意外的話，SSR的網站大多可以在CLS這項指標拿到綠燈（良好）。

至於SSR為什麼可以提高LCP分數，這個可能比較難懂，我解釋一下。計算LCP與頁面渲染的過程是這樣：

開始加載HTML(開始計時起算) ———> 解析HTML和CSS ———> 渲染最大內容元素

.

而CSR（客戶端渲染）與SSR（伺服器端渲染）的渲染過程是這樣：

CSR（客戶端渲染）：

1. 客戶端首先下載一個最小的HTML文件，然後下載必要的JavaScript和CSS。
2. JavaScript在瀏覽器端運行，負責創建整個頁面的內容。
3. 用戶必須等待JavaScript下載、解析和執行，然後渲染內容。這可能會導致延遲。

SSR（伺服器端渲染）：

1. 伺服器在接收請求時預先渲染HTML，生成包括所需內容的完整HTML文件。
2. 這個預渲染的HTML文件會被送到瀏覽器，所以瀏覽器可以在不等待JavaScript執行的情況下開始渲染。
3. JavaScript仍然需要下載和執行以提供交互功能，但是首次渲染可以更早開始。

所以對SSR而言，Client端不需要分兩次分別下載（先去請求HTML文件、再去下載JS）。它只需要下載一次就可以了！這也是SSR的網站為什麼可以在CLS拿到高分的原因。

.
.
.

做SSR前你必須知道的幾件事

1. 要正確設定才能優化SEO：

要確保網站的內容和meta tags有正確地渲染出來的，通常是用來告訴瀏覽器某些特定的資訊，比方說有字元編碼(Charset)、簡短描述(Description)、關鍵字(Keywords)......等等。

【圖】圖片來源：https://www.searchenginejournal.com/important-tags-seo/156440/

.

2. 異步資料的載入：

由於SSR是將前後端程式一起組好後送到Client端。因此，當你在初始化要另外Call API去拿資料的話，你必須確保已經先拿到資料才讓程式送到Cient端。

.

3. document 與 window 相關的API：

具體來說，這裡指的是使用「document」與「window」相關的API，在初始化的時候要另外下判斷來輔助使用。這是由於設定SSR後，初始化會在server端執行程式碼，因此是呼叫不到「document」與「window」的。

但如果能確保使用到「document」與「window」等API的程式，是在初始化後才執行，就不會有這個問題。在剛剛提到的「異步資料的載入」也是如此，都是初始化階段需要特殊考量的問題。
.

4. 伺服器的資源和效能：

使用SSR會更耗效能，因此可以考慮切割成多包小檔案，或是做lazying loading的設定，降低初始化帶來的龐大負擔。

.
.
.

今日回顧

這幾篇的文章是紀錄我學習新技術的過程，也有點比較偏向消化後的筆記。當然我沒有忘記這個鐵人賽主要要聚焦在「AI工具的應用」，因此，我會在這系列當中加幾篇【內功心法】，來向大家說明我是怎麼用ChatGPT進行學習的。

我們明天見！