先來聊聊不同的網頁渲染(rendering)方式，在 Next 會看到 pre-rendering(預渲染) 這個名詞，他的重點在 pre(預先) 這個字，與之相反的就是 client side rendering(CSR)。
上面可以大致區分為兩種渲染方式：
這裡講到的 rendering 就是產生出真實的 html 這件事。pre-rendering 就是 server 會先把 html 給產好，才會傳到 browser。而 client side rendering 就是指在客戶端(browser) 才開始渲染 html。
傳統前端框架(React, Vue, Angular)幾乎都是走 CSR 的渲染方式，也就是在第一次請求頁面時，伺服器並不會組出完整的 html，它只會吐給你一個容器。
像是：
<html>
<head></head>
<body>
<div id="root"></div>
<script src="./script.js"></script>
</body>
</html>
接著這份 html 才會去跟 server 要這一頁需要的 js，這份 js 會在客戶端(browser)渲染成真正的 html，然後才掛載到 <div id="root"></div> 這個容器裡面。
減少 Server 壓力
整段過程 server 完全沒有參與 rendering 的過程，只是單純的把 code 傳到前端而已，並沒有去執行它。
頁面切換速度比較快
切換頁面不必等 server 回傳 html，後續互動因為只需要更改部分的內容（框架會比對，只有在需要變動的地方才做渲染），所以反應會比較快。
首次載入慢
CSR 在首次載入時需要下載一包 js，這個 js 大小在專案越大的時候會越難控制，有些套件也沒辦法做到 spliting 的功能，就會影響到傳輸速度。
在 js 執行完成前，瀏覽器看到的就是一個白畫面。
SEO 差
搜尋引擎會去爬取每個網頁的內容，但 CSR 的網頁是到了 browser 才有內容，所以就會導致搜尋引擎不知道這個網站在做啥。
雖然有些搜尋引擎會為這件事做優化，但真的很在意 SEO 的話通常會使用 SSR 或是 pre-render 等等解決方案。
上面講到 pre-render 就是在 server 先把 html 組好後，才傳送至 browser。那底下這三個有什麼不一樣呢
差別在於資料的新鮮度，這三者的建立時間不一樣。
SSR 會在每一次頁面請求進來時，都會 fetch 最新的資料才做 render。
好處就是資料一定是最新的，適合那些內容經常更動的頁面。
缺點是比較吃 server 資源，因為每一個請求進來都要重新 fetch 新資料，重新 render html。
SSG 就是在 build time 的當下就去 fetch 資料，組成了 html。
好處是請求來不需要重新 fetch 資料和 render html，可以直接拿 build time 時建立好的 html。
缺點就是資料不會再變動，之後就算資料更新也不會重新 fetch。
ISR 是一個介於 SSG 和 SSR 的渲染方式。ISR 會有條件的去保存上一次 render 的結果，當沒有達到重新渲染的條件時，就會直接使用上一次保存好的 html；如果是達到重新渲染的條件就會重新去 fetch，然後 render html。
資料最新鮮
SSR > ISR > SSG
最快、效能最好
SSG > ISR > SSR
在真的寫下去的那刻才發現有些東西沒有搞得很懂，所以又去查了一波資料，所以不小心又寫到 2 點ㄌ
iThome鐵人賽
看影片追技術