iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~系列 第 3

#03 No-code 之旅 — 什麼是 SSG、SSR、CSR、ISR?

嗨大家!連假第一天過得如何?~ 今天想跟大家分享的主題是各種網頁渲染模式,就是 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 就是個好選擇。

我也有畫一個表,不過用英文的XD 大家可以看看~
https://ithelp.ithome.com.tw/upload/images/20210918/201413780sydZT7e8D.png

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

看更多


上一篇
#02 No-code 之旅 — Next.js 簡介
下一篇
#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30

尚未有邦友留言

立即登入留言