1

Suppose we have the following situation: we have a blog with a posts feed. When the page loads, there should already be like 3 <PostCard>s loaded, created on the server-side; the user will scroll down or press a Load more button and some new post cards should be dynamically added to the page.

I have Hack's XHP component <PostCard> and we have the ReactJS component <PostCard>.

So, should I:

  1. Implement the entire thing on the client-side, in React and have the XHP component's render() method only constructReactInstance()? (I've done something like that at some point, but I noticed that there are some delays on the page load, something like a "lag").
  2. Implement the component twice, both in server and client sides? (This is a total pain...)
  3. Something else...?

I hope I made myself clear and someone will be able to help me :smile_cat:

Victor
  • 13,914
  • 19
  • 78
  • 147
  • 1
    How to deal with this is an excellent question and I wish I knew enough for a good answer for you. I'll try to get some of my FB colleagues to write something up. My understanding is that we at FB mostly do (1) for nontrivial components, but some of our simpler stuff we do (2) since we sill do a fair bit of totally-server-rendered stuff and need base components in both languages. – Josh Watzman May 07 '16 at 14:09
  • @JoshWatzman, I am looking forward to the answer you were talking about. Thank you for the idea, though. I tried doing (1) which involves XHPJS and I found out that the repo for XHPJS is outdated and not maintained. Me and many other people would appreciate some updates of that for sure! – Victor May 07 '16 at 14:11

2 Answers2

0

There is no open-source solution to my knowledge that renders React on an HHVM server, so you're going to have to make a trade off somewhere. The way you have XHP calling RenderReactInstance is one valid solution to integrate XHP and React but you will suffer that perceived "lag" as the page loads and then parses and executes the JS. Caching can help, but it's still going to have to parse and run the JS. Alternatively, you could just have this be an XHP component and save the React components for the smaller-detail items. Specifically, you might only want the comment section to be React if that is the predominant interactive component and something that is ok to load slightly later than anything else. This would let the blog post content render on page load, but you might have to write other non-React JS to handle async loading of new components. It's all a trade off and I think you just have to determine what you think is more important to you.

Stefan Parker
  • 31
  • 3
  • There is loads of support for serverside react rendering http://facebook.github.io/react/docs/environments.html – Hamms May 09 '16 at 21:23
  • Let me rephrase, there is no open source _Hack_ solution to rendering React on the server. Will update answer. – Stefan Parker May 09 '16 at 22:09
  • [php-v8js](http://php.net/manual/en/book.v8js.php) running a nodejs daemon would probably be pretty straightforward – Hamms May 09 '16 at 22:12
0

Of course there is an environment for XHP and React JS. You can find what you need here : https://github.com/hhvm/xhp-js

You can do very powerfull thing with all this together. An adaptation time is needed but there is a great tutorial that some Facebook guy does, and it's well explian : https://github.com/hhvm/xhp-js-example

bbichero
  • 66
  • 1
  • 7