iT邦幫忙

2023 iThome 鐵人賽

DAY 14
0
影片教學

Nuxt 3 快速入門系列 第 14

[影片教學] Nuxt 3 渲染模式 (Rendering Modes)

  • 分享至 

  • xImage
  •  

Yes

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。


客戶端渲染 Client-Side Rendering (CSR)

https://ithelp.ithome.com.tw/upload/images/20230929/20152617QggzTN0qvC.png

優點

  • 渲染部分頁面
  • 前後端分離
  • 伺服器負擔較小

缺點

  • 白畫面
  • SEO

伺服器端渲染 Server-Side Rendering (SSR)

https://ithelp.ithome.com.tw/upload/images/20230929/201526177jl9HYsiCe.png

優點

  • HTML 由後端渲染,客戶端渲染負擔較小
  • SEO

缺點

  • 頁面重新載入
  • 伺服器端負擔較大

Hydration

https://ithelp.ithome.com.tw/upload/images/20230929/2015261722CvVX8O5b.png

Nuxt 3 的渲染模式

  • 通用渲染 (Universal Rendering) 預設模式
  • 產生靜態頁面 (Static Site Generation, SSG)
  • 混合渲染 (Hybrid Rendering)
  • 邊緣渲染 (Edge-Side Rendering, ESR)

感謝大家的閱讀,歡迎大家給予建議與討論,也請各位大大鞭小力一些:)
如果對這個 Nuxt 3 系列感興趣,可以訂閱接收通知,也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

參考資料


上一篇
[影片教學] Nuxt 3 Server API
下一篇
[影片教學] Nuxt 3 資料獲取 (Data Fetching)
系列文
Nuxt 3 快速入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言