Use in react app

[NikolaySolodukhin]

Can I use critical in react app?

[pocketjoso]

If you server side render it, yes.

[developer-lindner]

It works even without server side rendering...

[pocketjoso]

It works even without server side rendering...

No.

Even though critical (the package) might run without throwing any errors, and even return you a critical css - it is not of any use without (some kind of) server side rendering.

Critical css is used to enable browsers to render your website before it has loaded CSS + JS, based purely on the initial HTML (i.e. what your server returns) and the critical css. If your HTML is empty, the first render with critical css will be blank, hence no better than not using critical css at all.

Google's PageSpeed Insights has in my view been a major culprit as for why people have false conceptions about critical css, as it always just measured signals and never real performance (read more f.e. here), and would hence give thumbs up to things like non server side rendered react + critical css usage despite it making no difference for performance. With the recent update, even PSI should show now more clearly show you the lack of real performance improvement of this type of critical css usage.

You don't have to do perfect server side rendering (identical rendering) but if do none, your performance efforts are better spent on something other than critical css.

---

I'm trying to be helpful here so if there's any confusion about what I've written, please tell me! I might write up a blog post about this.

[bezoerb]

Closing this because the question is perfectly answered. Thanks @pocketjoso.

[nimaa77]

If you server side render it, yes.

@developer-lindner HOW?
it's impossible with to do it with afterjs (razzle) or nextjs.