DAY 26 - Nuxt 渲染模式 SSR+SPA / CSR / 混合渲染 ，輕鬆切換渲染模式

今日前言 - 網站模式/渲染模式複習

前篇 DAY 25 - Vue SPA 單頁式/ MPA 多頁式 / Nuxt SSR / CSR我們介紹了 SPA / MPA 及 SSR / CSR ，是不是對網站渲染方式有個基礎的認識，先幫大家複習下 :

網站模式/網頁渲染

• SPA 單頁式網站
• MPA 多頁式網站
• SSR 伺服器端渲染
• CSR 客戶端渲染

Nuxt 渲染模式 SSR + SPA

Nuxt 其中一大特性就是渲染方式，我們都知道 Vue 是屬於 SPA 網站，最大的缺點就是 SEO 優化差，那 Nuxt 的渲染方式解決 Vue 的 SEO 問題，但是同時又保有 SPA 的優點，那就是Universal Rendering (通用渲染)，結合了 SPA 的 靈活，並結合 SSR 的 SEO 優勢。

Universal Rendering (通用渲染)

Nuxt 預設使用 Universal Rendering (通用渲染) ，就是 SSR + SPA 結合，運作的原理是會先在初次伺服器端渲染再來第二次客戶端渲染，伺服器端渲染可以保有 SEO 優勢，第二次則是給使用者良好 UX 體驗

Nuxt 官方渲染模式介紹

Nuxt 切換渲染模式

在nuxt.config 也可以切換渲染方式，默認是 Universal Rendering (通用渲染) - SSR ，我們也可以改為 false ，這樣就變成 CSR 渲染方式就是像 Vue 一樣，可以依照需求切換渲染模式。

//nuxt.config
export default defineNuxtConfig({
  ssr: false // 改為csr，關閉 ssr
})

Nuxt 混合渲染 (Hybrid Rendering)

在 Nuxt3 裡加入了混合渲染 (Hybrid Rendering)模式，我們可以自訂不同頁面要用 CSR、SSR，我們可以在nuxt.config 裡加入一個 routeRule ，在裡面我們可以自訂每個 page 路由 ssr true/false

export default defineNuxtConfig({
  routeRules: {
   '路由': { 渲染模式 }
  }
})

來看看官方範例:

export default defineNuxtConfig({
  routeRules: {
    // Static page generated on-demand, revalidates in background
    '/blog/**': { swr: true },
    // Static page generated on-demand once
    '/articles/**': { static: true },
    // Set custom headers matching paths
    '/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } },
    // Render these routes with SPA
    '/admin/**': { ssr: false },
    // Add cors headers
    '/api/v1/**': { cors: true },
    // Add redirect headers
    '/old-page': { redirect: '/new-page' },
    '/old-page2': { redirect: { to: '/new-page', statusCode: 302 } }
  }
})

在 nuxt.config 我們可以針對不同路由自訂模式，依照需求切換渲染方式