search

Automattic / Picard

A prototype theme that uses React and WP-API
629 stars 110 forks source link

Server-Side Rendering #35

Open rdebeasi opened 9 years ago

rdebeasi commented 9 years ago

In the initial page load, it would be great if React components be rendered to HTML server-side. Doing this would improve performance, compatibility, SEO, and reliability. We'd get these benefits without having to write our code once in PHP and then again in JavaScript.

I know this is a pretty major task, but there's some prior work that could serve as the foundation:

jacklenox commented 9 years ago

Thanks for filing the issue @rdebeasi. I've been working on ideas around this for a while. I did also read Stoyan's article some time ago.

Personally I'm not keen on the v8js extension. My primary concern is that it is a PECL extension and many environments don't allow you to install these, and even when it is possible it is quite a complicated process for less technical folks.

In addition to this, the v8js extension is apparently not very performant, this is one of the reasons that Facebook sought to reduce their reliance on it.

I think the best solution to keep everything within the bounds of the typical WordPress environment is to automatically generate the PHP files usually needed for the theme from the React components. I actually gave a brief lightning talk about this at PHP Conference Asia two days ago. The slides are here.

The slides on their own are not great but I'm currently working on a fully implemented version that I'll be sharing within the next week.

rdebeasi commented 9 years ago

Thank you for the detailed reply! Generating PHP from React components sounds awesome. I can't wait to see the results!

lamosty commented 8 years ago

@jacklenox How do you plan on generating the PHP files from the React components? With a PHP script? Like parse the .js files holding React components and generate HTML/PHP files from that? That sounds crazy. :+1:

I was thinking about installing Node.js on the server alongside the standard WordPress installation and use something like WordPress REST API for Node to get the data and render the React components from Node.js.

The problem is that a typical user won't have access (both knowledge and physical access) to the hosting server so we can't rely on users having Node installed.

I think this is a major issue with WP REST API and WordPress because without being able to output the React/JS components from the server, themes built upon these technologies will be slow (initial load) and have bad SEO.

Please share your ideas on how you plan to solve this.

thedamon commented 8 years ago

@lamosty that is exactly what I would expect. Sounds crazy. Is awesome.

I agree with the observations about this being a bit intense for younger devs to setup. But we have to be aware of the advanced devs with server access who could benefit hugely from this.

Maybe some people are happy using v8js because they have a smaller site that's aggressively cached so the performance isn't an issue. Maybe some people have node running on their server and would like to use that. There may be people looking for isomorphic javascript using regular (headful?) wordpress.

I can see how there would be no one size fits all solution, but I think this is a very important behaviour to enable. A react component just outputs html so it doesn't have to relate that much to the php side of things beyond writing to a file, but it would have to be wired up to the database same as the client side code.

Maybe the answer is more along the lines of a service/API to interact with different methods of running/saving out React components to the filesystem in whatever way is necessary? Are there any other project anyone knows about that could be leveraged for this?