Open1

Nuxt3 メモ

sinwiosinwio

SSG(Static Site Generation)

Nuxt3では、ページの静的生成(pre-rendering)がサポートされています。この機能を利用することで、特定のページをビルド時にHTMLとして生成し、リクエストに対してすぐにそのHTMLを返すことができます。これにより、サーバーサイドでのレンダリングの必要性を排除し、レスポンスの高速化が期待できます。

メリット

パフォーマンス向上:
HTMLはビルド時に生成され、そのHTMLはそのまま返されます。これにより、レンダリングのための待ち時間を短縮できます。

SEO対策:
静的なHTMLを生成するため、検索エンジンのクローラが容易に内容を理解できます。これは、SEO(検索エンジン最適化)に非常に有利です。

スケーラビリティ:
生成された静的なHTMLはCDN等を通じて配信できるため、大規模なトラフィックに対してもスケールしやすいです。

設定方法

nuxt.config.js
defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/pages/static']
    }
  }
})
npx nuxi generate

publicディレクトリに、HTML・CSS・JavaScriptを含むフルに機能するWebページ(statice.html)が生成されます。

[参考]
https://nuxt.com/docs/getting-started/deployment#selective-pre-rendering