Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improving performance through streaming #66

Open
tom2strobl opened this issue Mar 6, 2017 · 6 comments
Open

Improving performance through streaming #66

tom2strobl opened this issue Mar 6, 2017 · 6 comments
Labels
enhancement help wanted

Comments

@tom2strobl
Copy link

This is obviously not an issue, but a possible enhancement: Currently we compile the htmlOutput and then send it over the wire, we could instead leverage streaming the contents down by using https://github.com/FormidableLabs/rapscallion, which imho nailed it.
@jedireza
Copy link
Owner

jedireza commented Mar 9, 2017

Thanks for opening an issue. I'm time poor right now. Though, I'd be interested in what this would/could look like and how we'd integrate (optionally) rapscallion in this module.

@tom2strobl
Copy link
Author

Right now I'm experimenting with kind of skipping vision altogether by hooking up reply with reply.renderReact() which (simplified for clarity) looks kinda like this:

renderView.js
(+ server.decorate('reply', 'renderReact', require('./lib/renderView.js'));)

module.exports = function(view, dataFromController) {
  const data = extend(someDataWithLocaleOrOtherServerStuff, dataFromController);
  const Component = require(`../components/${view}.js`);
  const componentRenderer = render(<Component {...data} />);
  const responseRenderer = template`
    <html>
      <head>
        [...]
        <div id="app-mount">${componentRenderer}</div>
        [...]
        <script id="app-state">
          window.state = ${() => JSON.stringify(data)}
          document.querySelector("#app-mount").setAttribute("data-react-checksum", "${componentRenderer.checksum()}")
        </script>
        <script src="/scripts/client.js"></script>
      </body>
    </html>
  `;
  const stream = responseRenderer.toStream();
  this(stream);
}

someController.js

reply.renderReact('home', {
  title: 'Home',
  records: someDatabaseResult,
});

Which feels wrong but works surprisingly well.

@wswoodruff
Copy link

wswoodruff commented Nov 13, 2017 •
edited

@tom2strobl I'd love for vision to have a great solution for server-side React rendering (like this lib here!) -- what would be your ideal interface as far as passing options? Would anything else drive your decision besides streaming?

@jedireza
Copy link
Owner

React v16 supports streaming:

Even though streaming isn't totally general purpose (there are some gotchas), I'm much more inclined to try incorporating a streaming API in hapi-react-views now that's it's officially part of React.

Is rapscallion still needed?

@tom2strobl
Copy link
Author

@wswoodruff to be honest we moved away from hapi directly serving client markup at all. We run next.js and it's getInitialProps in the front and regular hapi in the back (and merged the next-handler into hapi to have one single clean server) and all data APIs and client templates are separated. Vision does both at the same time, gathering data and then rendering markup from a template. The age of code splitting, lazy loading and prefetching made things a little more complex…

@wswoodruff
Copy link

@tom2strobl Cool! I haven't delved too much into SSR for React yet, seems like a great setup!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tom2strobl @jedireza @wswoodruff