Include styles in pre-rendered Preact CLI build

Question

Preact CLI has a feature called pre-rendering . It enables the content of specific routes to be served directly inside the HTML, without the JavaScript being loaded yet.

The content loads directly with the HTML (statically server-side rendered). So, since the JavaScript bundle has not been loaded at the point, the content is displayed without the styles, resulting in the styles flashing in after a fraction of a second.

You can disable the pre-rendering, which works fine, but that means discarding an useful feature. Is there a solution that pre-renders and includes the styles? Or what else can I do about this?

Answer 1

actually, the content should not be displayed without styles unless you are using a custom template witk --template flag.

The default templates include a <link rel='stylesheet' in the HEAD section. which should avoid the problem you are stating.

Later the jS will come and make stuff interactive but FOUC should not be there.