nuxt3のハイブリッドレンダリングについて、詳しく知りたいと思い、調査した。

2種類のレンダリング

Nuxt3の公式ドキュメントの「Rendering Modes」のページでは詳しく記載しています。
そのページによるとNuxt3は、大きく分けて、「Universal Rendering」、「Client-Side Rendering」の２つに対応しています。

Universal Rendering
PHPやRubyアプリケーションによって実行される従来のサーバー側レンダリングに似ており、Nuxtはサーバー環境で JavaScript (Vue.js) コードを実行し、完全にレンダリングされたHTMLページをブラウザに返します。
つまり静的に生成してくれるようです。
これだと、表示するまでの速度も速くなり、検索エンジン最適化もされます。
Client-Side Rendering
従来の Vue.js アプリケーションは、そのままではブラウザ (またはクライアント) でレンダリングされ、ブラウザが現在のインターフェイスを作成するための指示を含むすべてのJavaScriptコードをダウンロードして解析した後、Vue.jsはHTML要素を生成します。
コードのサーバー互換性について心配する必要がなく、インターネットが利用できないときでも問題なく動作できます。

Hybrid Rendering

ハイブリッドレンダリングでは、ルールを使用してルートごとに異なるキャッシュルールを許可し、特定のURLに対する新しい要求にサーバーがどのように応答するかを決定できます。
nuxt.config.tsで設定できます。
以下がサンプルです。

export default defineNuxtConfig({
  routeRules: {
    // Homepage pre-rendered at build time
    '/': { prerender: true },
    // Products page generated on demand, revalidates in background, cached until API response changes
    '/products': { swr: true },
    // Product pages generated on demand, revalidates in background, cached for 1 hour (3600 seconds)
    '/products/**': { swr: 3600 },
    // Blog posts page generated on demand, revalidates in background, cached on CDN for 1 hour (3600 seconds)
    '/blog': { isr: 3600 },
    // Blog post page generated on demand once until next deployment, cached on CDN
    '/blog/**': { isr: true },
    // Admin dashboard renders only on client-side
    '/admin/**': { ssr: false },
    // Add cors headers on API routes
    '/api/**': { cors: true },
    // Redirects legacy urls
    '/old-page': { redirect: '/new-page' }
  }
})

設定できる種類

SSR

サーバーサイドレンダリングで、冒頭説明したUniversal Renderingに該当します。

'/products': { ssr: true  }

動的に生成され、バックグラウンドで再検証されます。キャッシュされたページが更新されるまで一時的に利用されます。

prerender

'/admin/**': { prerender: true }

prerenderをするとページを事前レンダリングします。sitemap.xmlを生成する際にも利用できます。

ISR

 '/blog/**': { isr: true },

ISRは、ビルド時に生成される静的ページの一部を動的に更新できます。
ISRは対応可能ですが、これをサポートするプラットフォーム (現在はNetlifyまたはVercel)しかないため、限られているようです。

注意点

詳しく見ていると、nuxt generate時には、ハイブリッドレンダリングができないようです。
また、ハイブリッドレンダリング自体もNetlify と Vercel のみ対応しているようです。
ハイブリッドレンダリングをする場合は、nuxt buildで生成できるようにシステムを構成する必要があります。

Note that Hybrid Rendering is not available when using nuxt generate.

その他の設定

corsの設定

'/api/**': { cors: true }

リダイレクトの設定

'/old-page': { redirect: '/new-page' }

ESR

エッジサイドレンダリング (ESR) は、Nuxt3に導入された強力な機能で、コンテンツ配信ネットワーク (CDN) のエッジサーバーを介して、ユーザーに近い場所で Nuxt3アプリケーションをレンダリングできます。
ESRを活用することで、パフォーマンスが向上し、レイテンシが短縮され、ユーザーエクスペリエンスが向上します。
ESRの場合は、Cloudflare、Vercel、Netlifyで利用できます。

まとめ

もしISRやハイブリッドレンダリングなどを利用したい場合は、NetlifyかVercelにデプロイし、nuxt buildでビルドしましょう。

参考
https://nuxt.com/docs/guide/concepts/rendering