Implement proper preact-ssr

[arunoda]

EDIT: Updated inferno example as well

In the current version of preact, it only works(barely) in the client side. But in the server, it still using react.

So, this fixes that issue and improve the use of preact.

Here we've introduce a module alias system where it alias correctly in different places.(Node, webpack, babel)

Preact also doesn't work well with react-hot-loader. And we don't really need preact in the dev mode. So with this, we only run preact only in production.

How to add preact as mentioned above?

Now it's pretty easy. Just create a config in next.config.js like this:

module.exports = {
  alias: function ({ dev, env }) {
    // For the development version, we'll use React.
    // Because, it support react hot loading and so on.
    if (dev) return {}

    // We use preact for the production where it gives us better performance.
    return {
      'react': env === 'client' ? 'preact-compat/dist/preact-compat' : 'preact-compat',
      'react-dom': env === 'client' ? 'preact-compat/dist/preact-compat' : 'preact-compat'
    }
  }
}

[developit]

Hiya @arunoda - I'd love to play around with this and see if I can run into (and thus fix) any issues with SSR. Would you be able to explain how you're testing this out? Am I right in thinking it's just this:

git clone && npm i && cd examples/using-preact && npm i && npm start

[arunoda]

@developit Yep. That's it.
If you did some changes to next.js code, delete node_modules/next inside the example app and do npm i again.

[thangngoc89]

@arunoda any plan to merge this? It seems like you're working on may PRs at a time

[arunoda]

@thangngoc89 this is marked for 2.1 release.
So, this won't get merged soon.

[timneutkens]

This can be closed because of the new preact example.