1

I wrote a React image gallery or slideshow. I need to make the alt text indexable by search engines, but because my server is in PHP, React.renderToString is of limited use.

The server is in PHP + MySQL. The PHP uses Smarty, a decent PHP template engine, to render the HTML. The rest of the PHP framework is my own. The Smarty template has this single ungainly line:

<script>
    var GalleryData = {$gallery};
</script>

which is rendered by the PHP's controller function as follows:

    return array(
        'gallery'     => json_encode($gallery),
    );

($gallery being the result table of a MySQL query).

And my .js:

React.render(<Gallery gallery={GalleryData} />, $('.gallery').get(0));

Not the most elegant setup, but given that my server is in PHP there doesn't seem to be much of a better way to do it (?)

I did a super quick hack to fix this at first shot - I copied the rendered HTML from Firebug, and manually inserted it into a new table in the DB. I then simply render this blob of code from PHP and we're good to go on the browser.

There was one complication which is that because React components are only inserted into the DOM as they're first rendered (as I understand it), and because the gallery only shows one image slide at a time, I had to manually click through all slides once before saving the HTML code out.

Now however the alt text is editable by CMS and so I need to automate this process, or come up with a better solution.

Rewriting the server in Node.js is out of the question.

My first guess is that I need to install Node, and write a script that creates the same React component. Because the input data (including the alt text) has to come from MySQL, I have a few choices:

  1. connect to the MySQL DB from Note, and replicate the query
  2. create a response URL on the PHP side that returns only the JSON (putting the SQL query into a common function)
  3. fetch the entire page in Node but extracting GalleryData will be a mess

I then have to ensure that all components are rendered into the DOM, so I can script that by manually calling the nextSlide() method as many times as there are slides (less one).

Finally I'll save the rendered DOM into the DB again (so the Node script will require a MySQL connection after all - maybe the 1st option is the best).

This whole process seems very complicated for such a basic requirement. Am I missing something?

I'm completely new to Node and the whole idea of building a DOM outside of the browser is basically new to me. I don't mind introducing Node into my architecture but it will only be to support React being used on the front-end.

Note that the website has about 15,000 pageviews a month, so massive scalability isn't a consideration - I don't use any page caching as it simply isn't needed for this volume of traffic.

I'm likely to have a few React components that need to be rendered statically like this, but maintaining a small technical overhead (e.g. maintaing a set of parallel SQL queries in Node) won't be a big problem.

Can anyone guide me here?

DWB
  • 1,544
  • 2
  • 16
  • 33
Dagrada
  • 1,135
  • 12
  • 22
  • Are you sure that React is a good fit for your needs given your current technology stack? You could just use React only when new data is requested on the client. – WiredPrairie Feb 23 '15 at 23:14
  • vs Backbone, for example, or vs nothing/jQuery? My React image gallery is one of the more elegant bits of code I've written - the benefit of React (or any equivalent app framework on the Javascript side), is easy to see. Perhaps Backbone would be easier to plug in? But somehow I suspect not any easier overall. – Dagrada Feb 23 '15 at 23:23
  • Trying to fit a PHP based system with a JavaScript framework may not be the best choice ... regardless of which one you've chosen. – WiredPrairie Feb 24 '15 at 00:58
  • 1
    possible duplicate of [Displaying a server side rendered reactJS component within a PHP application](http://stackoverflow.com/questions/23337006/displaying-a-server-side-rendered-reactjs-component-within-a-php-application) – WiredPrairie Feb 24 '15 at 00:58
  • My clientside code is orders of magnitude more elegant because of React. My server code is fine as PHP. Something seems wrong here. – Dagrada Feb 24 '15 at 03:06
  • 1
    React is a perfectly fine option to do what you're doing. I see no reason to replace it with a half-baked lib. Actually, I think you should also use React for your gallery stuff instead of jQuery plugins (I remember you've posted something like this. Apologies if you're not :) ) – cyberglot Feb 25 '15 at 09:55
  • The Gallery *is* in React - there's no talk of jQuery here. Thank you for your words of advice! – Dagrada Feb 25 '15 at 21:39

1 Answers1

3

I think you should try rendering React components on server-side using PHP. Here is a PHP lib to do that.

But, yes, you'll basically need to use V8js from your PHP code. However, it's kind of experimental and you may need to use other around. (And this "other way around" may be using Node/Express to render your component. Here is some thoughts on how to do it.)

cyberglot
  • 365
  • 3
  • 32