Nuxt.jsの静的サイトジェネレータ（SSG）とは

by

Nuxt.jsとは

Nuxt.jsはVue.jsフレームワークをベースにしたJavaScriptのフレームワークであり、Nuxt.jsのSSG（Static Site Generation）はその中でも特定の機能の一つです。

ではNuxt.jsで実際にコードを書く前にSSGについて知識を深めておきましょう。

SSGとは

SSGは、静的サイト生成とも呼ばれ、事前にサーバーサイドでページを生成し、それを静的なHTMLファイルとして提供する手法です。これにより、クライアントのリクエストごとにサーバーがページを生成する必要がなくなり、パフォーマンスやスケーラビリティの向上が期待できます。

Nuxt.jsのSSGは、開発者がNuxt.jsを使用して静的なサイトを構築する際に便利な機能です。

Nuxt.jsのSSGの特徴

  • ビルド時にページを事前生成: Nuxt.jsのビルドプロセス中に、全てのルート（ページ）が事前に生成されます。これにより、リクエストがあった際にページを生成する必要がなくなります。
  • パフォーマンスの向上: 生成された静的なHTMLファイルは、高速な静的ファイルサーバーから直接提供されます。サーバーサイドでの処理やデータベースのアクセスなどのオーバーヘッドがなくなり、応答時間が向上します。
  • SEOの改善: 静的なHTMLファイルは、クローラーや検索エンジンにより容易に解析されます。動的なコンテンツをサーバーサイドで生成する必要がないため、SEOのパフォーマンスが向上することが見込めます。
  • キャッシュの利用: 静的なHTMLファイルはキャッシュされるため、同じコンテンツに対する複数のリクエストに対して効率的なキャッシュを提供できます。

Nuxt.jsのSSGは、サーバーサイドで動的なデータの取得やAPIの呼び出しが必要な場合には、ビルド時に事前生成するデータを取得するための特別なメソッドを提供しています。

要約すると、Nuxt.jsのSSGは開発者が静的なサイトを効率的に構築できる機能であり、パフォーマンスやSEOの向上に貢献します。

Nuxt.jsを使用したSSGの短所


Nuxt.jsのSSGにはいくつかの短所があります。以下にいくつかの一般的な短所を挙げます：

  1. 動的なコンテンツの制約: SSGは静的なHTMLファイルを生成するため、動的なコンテンツ（ユーザーのログイン状態やリアルタイムのデータなど）には制約があります。動的なコンテンツを提供するためには、クライアントサイドのJavaScriptやAPI呼び出しが必要になる場合があります。
  2. ビルド時間の増加: SSGでは、ビルド時に全てのページを事前生成するため、ページの数やコンテンツの複雑さによってはビルド時間が増加することがあります。大規模なサイトや複雑なデータ要件を持つ場合、ビルド時間が長くなる可能性があります。
  3. リアルタイムの更新の制約: SSGでは、ビルド時に生成された静的なHTMLファイルが提供されるため、リアルタイムな更新やリアルタイムなデータの表示には制約があります。リアルタイムな情報の反映やインタラクティブな要素を持つ場合には、クライアントサイドのJavaScriptやAPI呼び出しが必要になる場合があります。
  4. キャッシュの管理: SSGでは静的なHTMLファイルがキャッシュされるため、コンテンツの更新やキャッシュの無効化に対する管理が必要になります。コンテンツが頻繁に変更される場合や個別のユーザーに対してパーソナライズされたコンテンツを提供する場合には、キャッシュの制御が課題になることがあります。

以上が一般的な短所ですが、これらの制約はプロジェクトの要件や目標によって異なる場合があります。Nuxt.jsのSSGは、静的サイトのパフォーマンスやSEOの向上に役立つ機能であり、適切な使用場面で優れた選択肢となることがあります。

では、Nuxt.jsのSSGの短所も理解できたところでNuxt.jsの強みであるSSRと比較してみましょう。

SSRとSSGの比較

SSR（サーバーサイトレンダリング）とSSG(静的サイトジェネレータ)のパフォーマンスの違いを表にしました。

SSRSSG
最新のページを表示できる★★★★☆☆
リスポンススピード★★☆★★★
ホスティングの柔軟性★★☆★★★
ビルドのスピード★★★★★☆

上記に上げられたようにSSRと比べてホスティングに制約がないこととサイトのリスポンスが早いことは理解できましたがSSRに比べるとビルドのスピードが遅くなることと、SSRのようにページの柔軟性がなくなります。

また状況によってはSSRとSSGを組み合わせたハイブリッドのサイトを作成することも可能になります。

Nuxt.jsのプロジェクト作成

では下記のコマンドでNuxtのプロジェクトを作成しましょう。

npx nuxi init <プロジェクト名>

#例
npx nuxi init ssg-app
Need to install the following packages:
  nuxi@3.5.0
Ok to proceed? (y) y
Nuxi 3.5.0                                                                                                 10:31:00 AM
✨ Nuxt project is created with v3 template. Next steps:                                                   10:31:03 AM
 › cd ssg-app                                                                                              10:31:03 AM
 › Install dependencies with npm install or yarn install or pnpm install                                   10:31:03 AM
 › Start development server with npm run dev or yarn dev or pnpm run dev



cd <プロジェクト名>
npm i

ではデフォルトではapp.vueがランディングページになっていることを確認します。

ちなみにこの＜NuxtWelcome/>のコンポーネントはライブラリから引用されるデフォルトのコンポーネントなので消してしまってOKです。

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

静的サイトのビルド

では下記のコマンドで静的サイトをビルドしましょう。

npx nuxi generate

ビルドが終わると.output/publictディレクトリが作成されウェブサイトに必要なファイルがコンパイルされましたね。この中にindex.htmlがあるのでクリックしてください。

これがSSGのエントリーポイントになります。

まとめ

Nuxtを使うことでクライアント側のレンダー、サーバー側のレンダーを意識することが増えるようになります。またSSGを意識することによってさらにウェブ開発の見方が広がることになります。是非試してみてください。