Simplify styled-components example

[timneutkens]

• use enhanceApp so that styled-components used in _app.js are server rendered
• call parent getInitialProps, fixes Global styles not being rendered server side and only occuring client side with flicker #5629
• return styles, making the render() method obsolete.

cc @mxstbr @probablyup

[mxstbr]

Going to defer to @timneutkens for a review of the Next stuff, but from a s-c perspective this looks fine!

EDIT: I'm a dummy and didn't realize you had changed your avatar. 🤦‍♂️ 🤦‍♂️ 🤦‍♂️ 🤦‍♂️

Shipit!

[timneutkens]

@mxstbr I am @timneutkens 😂 😄

[jsardev]

Nice! @timneutkens What is enhanceApp and why it's not documented anywhere? 😭

[klujanrosas]

@sarneeh It was a change introduced here #4762

Usage before #4762 was:

renderPage(Page => Page)

This applied the enhancer to the Page component.

Now, it also takes an options object(although previous behaviour was kept for backwards compatibility):

renderPage({
  enhanceApp: App => App,
  ehhanceComponent: Component => Component
})

As @timneutkens mentioned here

this enhancer is not documented in the readme and the only use case it was meant to support is styled-components / other css-in-js libs that require the react tree

[jsardev]

@klujanrosas Thank you for the explanation! I didn't stumble upon this PR 😄

[timneutkens]

Honestly I think we can document this by now with the approach taken in this PR. The reason I said not to document it was because renderPage would have to be called instead of super.getInitialProps, which is not the case as per this PR 😄

[klujanrosas]

Hey @timneutkens , do you think it should it be documented on the repo's README?
Or on the example itself

I went ahead and gave it a shot in #5723

[timneutkens]

The repo readme