StencilJSのprerenderで画像がちらつく時の対処法

StencilJSのprerender（Server Side Generate）、便利ですよね。複雑な設定いらずでビルドコマンドを stencil build --ci --prerender とするだけでレンダリング後のファイルを生成することができます。しかし、フレームワークが直面するように、StencilJSでも実ブラウザレンダリング後のちらつき（ flash ）問題を抱えることとなります。

https://benaton.net/ は現在StencilJSのprerenderでビルドしているのですが、以下の問題をもっていました。

• prerenderされたindex.htmlファイルをダウンロードして表示
• 各JSスクリプトをダウンロードして実行
• prerenderされたHTMLファイルが、JSスクリプトで生成されたHTMLに置き換え <= ここで画像がちらつく！

つまり、HTMLが置き換えられる時にちらつき（ flash ）が発生してるわけですね。これよくみてみると、StencilJSのprerenderだと、デフォルトでは hashAssets が有効になっていました。

export interface PrerenderHydrateOptions {
  ...
  hashAssets?: 'querystring';
  ...
}

なので、prerenderされたHTMLファイルでは画像ファイルが hoge.png?v=** （**は乱数）であることに対して、JSがレンダリングした画像ファイルは hoge.png であることによって、ブラウザが「ファイルは別物である」と認識してるわけですね。なので、これを修正してやるには、hashAssetsをなくしてあげれば大丈夫です。

まず、 prerender.config.ts を用意して、hashAssetsをundefinedにします。

prerender.config.ts

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

export const config: PrerenderConfig = {
  hydrateOptions() {
    return {
      hashAssets: undefined,
    };
  }
};

そのあとに stencil.config.ts でprerenderConfigを用意します。

stencil.config.ts

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

設定自体は簡単ですね。それではまた。