improve first meaningful paint on browser

[ianwang]

Before (~2s)

After (~1s)

☝️ both are tested on localhost (Chrome v65.0)
the green line is the first frame captured.

Description

speed up by delaying codemirror theme & highlightjs (big lib)

[mfix22]

Hey @ianwang this is great! As for checking if rendering if occurring inBrowser, are you sure this isn't causing a rerender due to a client-server mismatch (should have a warning in the console).

A way to avoid this is to just set state.mounted: true after componentDidMount() and render based on this.state.mounted === true

[ianwang]

@mfix22 yes I was expecting that, but interestingly I didn't see any warning about the mismatch.
maybe it's because React 16 changes the algo? or it's because of the implementation of next/head.

[mfix22]

Interesting. Okay well if i see it later i'll know where to look! 😄 Thanks so much.