SSRとSSGとSPAモード
ssr:true/false、Nitroのprerender、generateコマンド、ルート単位のハイブリッドレンダリング
「SSRとSSGとSPAモード」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
レンダリングモードの概要
Nuxtでは、アプリを3つの方法でレンダリングできます。SSR（リクエストごとにサーバーでレンダリング）、SSG（ビルド時にページを事前構築）、SPA（すべてをブラウザでレンダリング）です。ルートごとに組み合わせることもできます。
SSR：デフォルト
ssr: true（デフォルト）では、サーバーがリクエストごとにHTMLをレンダリングし、クライアントがそれをハイドレーションします。これにより初回表示が速く、クローラーに完全なマークアップが見えるためSEOにも優れています。
// nuxt.config.ts
export default defineNuxtConfig({
ssr: true
})SSRが適する場面
SSRは、ダッシュボード、フィード、価格がリアルタイムに変わるECサイトなど、頻繁に変更されるコンテンツやパーソナライズされたコンテンツに適しています。リクエストごとに最新のHTMLを提供したい場合に便利です。
SPAモード
ssr: falseを設定すると、Nuxtはシングルページアプリになります。サーバーは空のシェルを送信し、ブラウザがすべてをレンダリングします。ホスティングは簡単になりますが、SEOが弱く、初回表示も遅くなります。
export default defineNuxtConfig({
ssr: false
})SPAが適する場面
SPAモードは、SEOが重要ではなく、静的ファイルとして任意のCDNにデプロイしたい社内ツールやログイン後のアプリに適しています。
SSG：静的サイト生成
nuxt generateを実行すると、ビルド時にすべてのページが静的HTMLとして事前レンダリングされます。Nodeサーバーなしでどこにでもホスティングできるファイルのフォルダーが生成されます。
npx nuxt generate
# outputs static HTML to .output/publicSSGが適する場面
SSGは、ブログ、ドキュメント、マーケティングサイトなど、ほとんど変更されないコンテンツに最適です。ページは非常に高速で、CDNから安価に配信できます。
routeRulesによるルート単位のレンダリング
routeRules設定では、パスパターンごとにレンダリングモードを指定できます。これはハイブリッドレンダリングと呼ばれ、1つのアプリの異なる部分で異なる方式を使用できます。
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/admin/**': { ssr: false },
'/blog/**': { swr: 3600 }
}
})routeRulesの一般的なオプション
prerender: trueはビルド時にページを生成し、ssr: falseはSPAにします。swr: nはSSRの結果をn秒間キャッシュします（stale-while-revalidate）。redirectはユーザーを別の場所へ移動させます。
インクリメンタル静的再生成
isrオプションは、初回リクエスト時に事前レンダリングして出力をキャッシュし、定期的に再生成します。SSGの速度と、人気ページにおけるSSRの鮮度を両立できます。
routeRules: {
'/products/**': { isr: 600 }
}戦略の選択
まずは、SEOとインタラクティブ性を両立できるデフォルトとしてSSRを使用します。静的コンテンツにはSSG、非公開アプリにはSPAを使い、パフォーマンスの要件が明らかになったらrouteRulesで個別のルートを調整します。
理解度チェック
レンダリングモードに関する理解度を確認します。
まとめ
レンダリングモードについて学びました。
- SSR（デフォルト）はリクエストごとにレンダリングし、SEOに優れ、初回表示が速くなります。
- ssr:falseは、非公開アプリ向けのSPAを実現します。
- nuxt generateは静的なSSGサイトを生成します。
- routeRulesではハイブリッドレンダリングが可能になり、ルートごとにprerender、swr、isr、ssr:falseを設定できます。
よくある質問
「SSRとSSGとSPAモード」レッスンは無料ですか？
はい。「SSRとSSGとSPAモード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「SSRとSSGとSPAモード」で何を学びますか？
ssr:true/false、Nitroのprerender、generateコマンド、ルート単位のハイブリッドレンダリング ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「SSRとSSGとSPAモード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。