Fixing Image Flash During StencilJS Prerender

StencilJS prerender (server-side generation) is handy. Without much configuration, running stencil build --ci --prerender generates post-render files. Like other frameworks, StencilJS can also hit a post-hydration flash problem in real browsers.

https://benaton.net/ is currently built with StencilJS prerender, and it had the following issue:

• Download and display the prerendered index.html
• Download and run each JS script
• The prerendered HTML is replaced by HTML generated by the JS scripts <= images flash here!

So the flash happens when the HTML is replaced. Looking closely, StencilJS prerender enables hashAssets by default:

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

In the prerendered HTML, image files look like hoge.png?v=** (** is a random value), while JS-rendered HTML uses hoge.png. The browser treats them as different files. To fix this, disable hashAssets.

First, add prerender.config.ts and set hashAssets to undefined:

prerender.config.ts

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

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

Then point stencil.config.ts at that prerender config:

stencil.config.ts

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

The configuration itself is simple. See you next time.