静的サイト生成（SSG）の概要

静的サイト生成（一般的に「SSG」と呼ばれます）は、サイトのウェブページを静的HTMLファイルにプリレンダリングするプロセスです。利点は、訪問者がウェブページをリクエストしたときに、レスポンスが事前に生成されたHTMLファイル（静的ファイル）であり、ウェブページのHTMLを訪問者のブラウザで「再構築」したり、サーバーによって動的に作成したりする必要がないことです（これについては後述します）。

さらに、Qwikの基盤となるアーキテクチャにより、ページのパフォーマンスも向上します。JavaScriptの「ハイドレーション」ステップが不要になるため、パフォーマンスが大幅に向上し、ユーザーのインタラクティビティの低下を防ぐことができます。SSGで静的な`index.html`ファイルをプリレンダリングし、Qwikの再開性と組み合わせることで、静的サイト生成は従来のソリューションよりも多くのパフォーマンス上の利点をもたらします。

SSGとサーバーサイドレンダリング（SSR）の比較

Qwik Cityは、「ウェブアプリ」であっても「ウェブサイト」であっても、Qwikアプリケーションを取得して静的HTMLを生成できます。HTMLとして生成されると、Qwikは基本的に再開性を使用してアプリの再構築をスキップできます。これは、アプリがすでにHTMLとして生成されているためです。静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）はどちらも、HTMLを生成するために同じプロセスを使用します。ただし、SSGとSSRの主な違いは、HTMLが「いつ」生成されるかです。

従来のセットアップでは、SSGはビルド時に各ウェブページをプリレンダリングしますが、SSRは各HTTPリクエストに応じて各ウェブページをオンデマンドでレンダリングします。SSGはビルドごとに1回だけHTMLを生成する必要があります。これは、複数の訪問者が同じコンテンツを表示する必要があるウェブページに適しています。対照的に、SSRは、ウェブページが訪問者ごとに異なる場合に適しており、個々のHTTPリクエストごとにカスタムHTMLをレンダリングする必要があります。

たとえば、SSGは、すべてのコンテンツが複数の訪問者で同じである必要があるブログやドキュメントサイトに最適です。SSRはブログでも問題なく機能しますが、すべての訪問者が同じHTMLを表示することになる場合でも、すべての訪問者に対してブログコンテンツをレンダリングするためにHTTPサーバーに不必要な負荷がかかる可能性があります。

ただし、アカウントダッシュボードは、通常、サインインしているユーザーごとに異なるコンテンツを備えています。このセットアップでは、全員がまったく同じコンテンツを表示するのではなく、各ユーザーが自分のアカウント情報でレンダリングされた独自のHTMLを取得する必要があります。これは、SSRが推奨される状況です。

理想的には、静的サイト生成でできることが多ければ多いほど、サーバーのコストが削減され、応答時間が短縮されるため、より良い結果が得られます。

ただし、Qwik Cityでは、SSGを使用するかSSRを使用するかの決定は、どちらか一方を選択する必要はありません。代わりに、独自の実装で、一部のルートパスでSSGを使用し、他のページでSSRを使用することを選択できます。これは、ユーザーとユーザーの要件次第です。

静的サイト生成の設定

静的サイト生成は組み込みのアダプターから作成されます。アダプターを作成するには、以下を実行します。

npm run qwik add static

`Adapter: Static site (.html files)`を選択します。完了です！

変更点

上記のコマンドを実行すると、プロジェクトに次の変更が加えられます。

• `build.server`スクリプトが`package.json`ファイルに自動的に追加されます。
• `adapters/static/vite.config.ts`ファイルが作成されます。

ビルドファイルは`dist`フォルダーに生成されます。

次のコマンドを使用して静的サイトをビルドできます。

npm run build.server

SSG設定

`adapters/static/vite.config.ts`ファイルには、実装ごとにカスタマイズされるSSG設定も含まれています。

`origin`

スキーム（プロトコル）とホスト名（ドメイン）の組み合わせであるURL`origin`。たとえば、`https://qwik.dokyumento.jp`のプロトコルは`https://`、ドメインは`qwik.dev`です。ただし、`origin`には`pathname`は含まれていません。

`origin`は、静的サイト生成（SSG）中に完全なURLを提供し、`pathname`だけでなく完全なURLをシミュレートするために使用されます。たとえば、正しい正規タグURLまたは`sitemap.xml`内のURLをレンダリングするには、`origin`も提供する必要があります。

サイトが`/`以外のパス名で始まる場合は、Vite設定オプションの`base`オプションを使用してください（Qwik City設定オプションの`basePathname`オプションは非推奨です）。

`outDir`

outDir は、静的ファイルが書き込まれるファイルシステムの出力ディレクトリです。上記の例では、Node.js の fileURLToPath を使用して、静的 HTML ファイルを書き込むための絶対ファイルシステムパスを作成しています。

JavaScript ランタイム

JavaScript プロジェクトでは、ビルドのランタイムが Node.js 上に構築されることは非常に一般的です。しかし、Qwik City の静的サイト生成のコアは Node.js のみに結び付けられているわけではありません。そのため、qwikCityGenerate() 関数は @builder.io/qwik-city/static/node からインポートされます。生成関数を Node.js などの特定のランタイムにスコープすることで、Qwik City は将来的に Deno や Bun などの他のランタイムからも SSG を生成できる柔軟性を備えています。

動的な SSG ルート

これまでは、単一のルートパスに対して静的 HTML ファイルを生成する方法についてのみ説明しました。しかし、ほとんどの場合、動的なパラメータを持つ複数のルートパスに対して HTML ファイルを生成したいと思うでしょう。たとえば、製品サイトには、/product/:id のような、各製品のルートパスがある場合があります。この場合、各製品ページの HTML ファイルを生成する必要があります。つまり、各製品 ID に対して HTML ファイルを生成する必要があります。

import { component$ } from '@builder.io/qwik';
import { useLocation, type StaticGenerateHandler } from '@builder.io/qwik-city';
import { loadProductIds } from './load-product-ids';
 
export default component$(() => {
  const { params } = useLocation();
 
  return <p>Example: {params.id}</p>;
});
 
export const onStaticGenerate: StaticGenerateHandler = async ({ env }) => {
  // example of loading params for this use case
  // every implementation will be different
  const ids = await loadProductIds({
    apiKey: env.get('API_KEY'),
  });
 
  return {
    params: ids.map((id) => {
      return { id };
    }),
  };
};

上記の例では、onStaticGenerate() 関数は、環境変数から取得した API キーを使用して API をリクエストすることで、loadProductIds() 関数から製品 ID をロードしています。この関数は実装ごとにカスタムになりますが、一般的な考え方としては、各製品 ID のデータをロードし、各製品 ID の HTML ファイルを生成する必要があるということです。

onStaticGenerate 関数は、モジュールのトップレベルからエクスポートする必要があり、params プロパティを持つオブジェクトを返す必要があります。params プロパティは、各オブジェクトがルートパスの一連のパラメータであるオブジェクトの配列である必要があります。たとえば、ルートパスが /product/:id の場合、params 配列は id プロパティを持つオブジェクトの配列である必要があります。

この例のディレクトリ構造は次のようになります。

src/
└── routes/
    └── product/
        └── [id]/
            └── index.tsx

index.tsx ファイルが [id] という名前のディレクトリ内にあることに注意してください。これは、Qwik City に各 id パラメータに対して HTML ファイルを生成するように指示する特別なディレクトリ名です。index.tsx ファイルは、Qwik City がルートパスの HTML ファイルを生成するときに使用するデフォルトファイルです。