StncilJS의 prerender에서 이미지를 깜박일 때의 처리 방법

StncilJS의 prerender(Server Side Generate)는 매우 편리합니다.복잡한 설정 없이 렌더링된 파일을 생성하려면 빌드 명령을 stencil build --ci --prerender로 설정합니다.그러나 프레임워크가 직면한 바와 같이 단계 JS에서도 실제 브라우저가 렌더링된 후의 깜빡임flash 문제가 존재한다.
https://benaton.net/ 현재 StenilJS의prerender에서 구축 중입니다. 다음과 같은 문제가 있습니다.
prerender index.) 파일 다운로드 및 표시

JS 스크립트 다운로드 및 실행

prerender의 HTML 파일을 JS 스크립트에서 생성한 HTML<=로 바꿉니다!

즉, HTML이 교체되면 깜박임flash이 발생합니다.자세히 보면 StncilJS의 prerender라면 기본값hashAssets이 유효합니다.

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

따라서 prerender 이후의 HTML 파일에서 이미지 파일hoge.png?v=**(**는 무작위 수), JS 재현된 이미지 파일hoge.png에 대해 브라우저는'파일은 다른 것'으로 식별한다.그러니까 이걸 고치려면 해시어셋을 잃어버리면 돼.
우선, 준비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',
    },
  ],
};

설정 자체가 간단하네요.그럼 안녕히 계세요.