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でビルドしましょう。