Inferno: SSR Example?

Created on 10 Nov 2016 · 6Comments · Source: infernojs/inferno

I hate to be that guy...but would it be possible to get a simplest possible example of an app with a Component e.g. `import Inferno from 'inferno'
import InfernoDOM from 'inferno-dom'
import Component from 'inferno-component';

class MyComponent extends Component {
render() {
return

Hello

World

}
}

export default MyComponent
`

wherein the following takes place:

The component is available to be read/rendered by inferno-server
The component is available to the client in e.g. bundle.js

Source

minimok

Most helpful comment

FWIW, the SSR performance of non-streams, is still ~38x faster (25/s vs 950/s) than React [1]

[1] https://github.com/dfilatov/vidom/issues/257#issuecomment-262195991

leeoniya on 5 Dec 2016

👍3

All 6 comments

@minimok I can ask if someone else on the team has an example, I believe @nightwolfz might have. Otherwise, I can put one together later tonight if that's okay?

trueadm on 10 Nov 2016

would be amazing. I have looked at nightwolfz example. Looks really great - but it's a "ferrari" - and to start off I'm needing a bicycle :-)

minimok on 10 Nov 2016

Just for SSR, I think something like this will work (untested, wrote on the spot):

import Inferno from 'inferno'
import Component from 'inferno-component'
import { renderToStaticMarkup } from 'inferno-server'
import express from 'express'

const app = express()

class App extends Component {
    render() {
        return <p>Hello world</p>
    }
}

app.use(function(req, res) {
    res.send('<!DOCTYPE html>\n' + renderToStaticMarkup(App));
})

app.listen(8080)

If you want it to be isomorphic, that's a lot more work :)

nightwolfz on 10 Nov 2016

Very nice - good starting point. My own express / node setup won't allow the ES6 - so I guess I'm gonna have to transpile (at least the SSR portion as I plan on having inferno-mobx + decorators in the mix) - but that's v helpful. Much Appreciated!

minimok on 11 Nov 2016

A quick follow up question: this example is not using streams, which is one of the benefits of Inferno (compared to React). Would it be possible to create an example for that too, just to get a reference of how you're approaching that problem. Thanks.