静的サイト生成（SSG）の事前レンダリング構成

1.13.0以降、オプションのprerender設定は、www出力ターゲットを事前レンダリングするときに使用できます。 prerender.config.tsファイルは、HTMLにシリアル化される前に、各ページの解析されたドキュメントをさらに更新できます。

stencil.config.ts内で、prerenderConfigを使用して事前レンダリング設定ファイルパスへのパスを設定します 次のようなプロパティ:

import { Config } from '@stencil/core';

export const config: Config = {
  outputTargets: [
    {
      type: 'www',
      baseUrl: 'https://stenciljs.com/',
      prerenderConfig: './prerender.config.ts',
    }
  ]
};

次に、 prerender.config.tsファイル内で、PrerenderConfigインターフェースを使用して configオブジェクトをエクスポートする必要があります。

import { PrerenderConfig } from '@stencil/core';
export const config: PrerenderConfig = {
  ...
};

個々のページのハイドレートオプション

prerender.config.tsを使用した事前レンダリングプロセス全体の設定に加えて、次のこともできます。 各ページごとに個別のハイドレートオプションを設定します。 hydrateOptions(url)フックを使用して、各ページをさらに構成できます。 以下は、各ページのオプションを返す hydrateOptions()フックを使用した事前レンダリング構成の例です。

import { PrerenderConfig } from '@stencil/core';

export const config: PrerenderConfig = {
  hydrateOptions(url) {
    return {
      prettyHtml: true
    };
  }
};