嗨大家！連假第一天過得如何？～ 今天想跟大家分享的主題是各種網頁渲染模式，就是 SSG、SSR、CSR、ISR。長得都差不多，可是細節都不太一樣，在決定要用哪一種之前，我們先看看下面的介紹吧！

Static Site Generation (SSG)

SSG 或是靜態生成就是 build 整個專案的時候產生 HTML 檔案，這些 HTML 檔案已經包含所需要顯示的資料。這渲染模式是預渲染 (pre-rendering) 的一種。SSG 很適合做內容不會有變化的靜態網站，因為所有資料是 build 時得到的。這些 HTML 檔案可以放在 CDN 上然後被 cache 而提升網站效能，除了這點之外，採用 SSG 渲染模式也利於 SEO。

Server-side Rendering (SSR)

SSR 或是伺服器端渲染意思是每次瀏覽器 (客戶端 / client-side) 發送請求 (request) 時，伺服器才會產生 HTML 檔案然後丟回瀏覽器顯示。這渲染模式很適合變化頻率高的資料。不過因為伺服器需要時間產生 HTML 檔案，所以網站回應時間會比較久，使用者等待時會看到白畫面。SSR 也算是預渲染的一種，所以對 SEO 也蠻友善的～ 可是該注意，這方式需要伺服器一直處理使用者的請求。

Client-side Rendering (CSR)

CSR 或是客戶端渲染跟名字差不多的意思，伺服器傳給瀏覽器的 HTML 檔案可以算是無內容的。瀏覽器跟伺服器拿完資料才能渲染在畫面上。SPA (Single Page Application 像 React 或 Vue) 使用的渲染模式就是 CSR。這模式的最大優點是切換頁面的時候不需要再跟伺服器拿檔案，使用者不會看到白畫面了，算是很好的使用者體驗。不過渲染時間會依賴客戶端的環境，也因為這樣，伺服器的負擔降低不少。

Incremental Static Regeneration (ISR)

ISR 或是增量靜態生成比較少聽到的渲染模式，也算是預渲染的一種。ISR 在 build 專案時產生所有 (或部份) HTML 檔案，等到有新的 request 而且已經過了預定的時間，伺服器會先給瀏覽器舊檔案而在背後重新產生最新檔案，產生完之後再丟給瀏覽器做顯示。如果使用者到了一個還沒被 generate (產生) 的頁面，伺服器將當下產生該檔案也會做 cache，所以下一個到這頁面的使用者可以直接拿到 cache 裡的檔案。 ISR 很像 SSG 不過它解決了 SSG 不能更新資料內容的問題，而且 HTML 檔案也會被 cache 在 CDN 上，所以也減輕 SSR 對伺服器的負擔。

該用哪一種呢？

每一種渲染模式各有優缺點，該選哪一種也要看我們的專案，無法說出贏者。

• 資料不斷地變化而且不需要 SEO 的內部系統 dashboard 很適合用 CSR，
• 資料變化率不低可是需要 SEO，可以考慮用 SSR，
• 資料幾乎不用更新像活動或行銷網站，SEO 也很重要，用 SSG 很適合，
• 資料不太需要更新或是有太多頁面而且需要 SEO 例如商品頁，那 ISR 就是個好選擇。

我也有畫一個表，不過用英文的ＸＤ 大家可以看看～

Next.js 中的 Pre-render

Next.js 內建支援上面所寫的渲染模式，而且還預設用 SSG 渲染不需要抓取 (fetch) 資料的網頁，如果需要跟伺服器拿資料，那會跟 CSR 混用 (hybrid)。想要使用其他的渲染模式可以用以下 Next.js 提供的 functions：

• getStaticProps (Static Generation): build 專案時抓取所需要的資料而放進 HTML 檔案裡
• getStaticPaths (Static Generation): 在 build 時間決定哪些動態 (dynamic) routes 需要被產生 HTML 檔案
• getServerSideProps (Server-side Rendering): 每次瀏覽器發請求的時候會跑的 function 拿所需要的資料

小結

今天先到這裡，我們明天再繼續喔～
明天跟大家分享怎麼使用以上那三個 functions 實作不同渲染模式的網站！
大家對於今天學到的渲染模式有什麼想法呢？

晚安 <3

看更多

• Next.js Data Fetching
• Incremental Static Regeneration