制作React图库的策略对search引擎友好

我写了一个React图片库或幻灯片。我需要使search引擎可以索引替代文本，但因为我的服务器是在PHP中，React.renderToString是有限的使用。

该服务器在PHP + MySQL中。 PHP使用Smarty（一个体面的PHP模板引擎）来呈现HTML。其余的PHP框架是我自己的。 Smarty模板有这么一个单一的线：

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

这是由PHP的控制器function呈现如下：

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

（ $gallery是MySQL查询的结果表）。

而我的.js：

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

不是最优雅的设置，但考虑到我的服务器是在PHP中，似乎没有更好的方法来做到这一点（？）

我做了一个超级快速入门，在第一枪时修复了这个问题 – 我从Firebug复制了呈现的HTML，并手动将其插入到数据库中的一个新表中。然后，我只是从PHP中呈现这个代码块，我们很高兴浏览器。

有一个复杂的是，因为React组件只在第一次渲染时插入到DOM中（据我了解），而且由于该库一次只显示一个图像幻灯片，我不得不手动点击所有幻灯片一次保存HTML代码。

但是现在，替代文本可以由CMS编辑，所以我需要自动化这个过程，或者想出一个更好的解决scheme。

在Node.js中重写服务器是不可能的。

我的第一个猜测是我需要安装Node，并编写一个脚本来创build相同的React组件。由于input数据（包括alt文本）必须来自MySQL，我有几个select：

然后，我必须确保所有组件都被渲染到DOM中，所以我可以通过手动调用nextSlide（）方法多次编写幻灯片（less一个）来编写脚本。

最后，我将把渲染的DOM再次保存到数据库（所以Node脚本毕竟需要一个MySQL连接 – 也许第一个选项是最好的）。

对于这样一个基本要求，整个过程似乎非常复杂。我错过了什么吗？

我对Node完全陌生，在浏览器之外构buildDOM的概念对我来说基本上是新的。我不介意将Node引入到我的架构中，但它只是支持在前端使用React。

请注意，该网站每月大约有15,000个综合浏览量，因此不需要考虑大规模的可扩展性 – 我不使用任何页面caching，因为这种stream量并不需要。

我可能有一些需要像这样静态渲染的React组件，但是维护一个小的技术开销（例如，在Node中维护一组并行的SQL查询）不会是一个大问题。

有谁可以在这里指导我吗？

我想你应该尝试使用PHP在服务器端渲染React组件。这是一个PHP库来做到这一点。

但是，是的，你基本上需要从你的PHP代码中使用V8js。然而，这是一种实验，你可能需要使用其他的。（这个“其他的方法”可能是使用Node / Express来渲染你的组件，下面是一些关于如何去做的想法。）