This is obviously not an issue, but a possible enhancement: Currently we compile the h

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

React v16 supports streaming: <a href="https://hackernoon.com/

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Improving performance through streaming about hapi-react-views HOT 6 OPEN

jedireza commented on May 21, 2024

Improving performance through streaming

from hapi-react-views.

Comments (6)

tom2strobl commented on May 21, 2024 3

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.

from hapi-react-views.

jedireza commented on May 21, 2024

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.

from hapi-react-views.

wswoodruff commented on May 21, 2024

@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?

from hapi-react-views.

jedireza commented on May 21, 2024

React v16 supports streaming:

https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

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?

from hapi-react-views.

tom2strobl commented on May 21, 2024

@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…

from hapi-react-views.

wswoodruff commented on May 21, 2024

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

from hapi-react-views.

Improving performance through streaming about hapi-react-views HOT 6 OPEN

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent