使 React 图片库对 SEO 友好的策略

Question

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

服务器位于PHP + MySQL。 PHP 使用 Smarty，一个不错的 PHP 模板引擎来呈现 HTML。 PHP 框架的其余部分是我自己的。 Smarty 模板有这么一行笨拙的代码：

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

由PHP的控制器函数渲染如下：

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

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

还有我的 .js：

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

不是最优雅的设置，但考虑到我的服务器在 PHP 中，似乎没有更好的方法 (?)

我做了一个非常快速的 hack 来修复这个问题 - 我从 Firebug 复制了渲染的 HTML，然后手动将它插入到数据库中的新 table 中。然后，我简单地从 PHP 中渲染这个代码块，我们就可以在浏览器上继续了。

有一个复杂之处在于，因为 React 组件仅在 DOM 首次呈现时才插入到 DOM 中（据我所知），而且图库一次仅显示一张图片幻灯片，在保存 HTML 代码之前，我不得不手动单击一次所有幻灯片。

但是现在替代文本是 CMS 的 editable，所以我需要自动化这个过程，或者想出更好的解决方案。

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

我的第一个猜测是我需要安装 Node，并编写一个脚本来创建相同的 React 组件。因为输入数据（包括 alt 文本）必须来自 MySQL，我有几个选择：

然后我必须确保所有组件都呈现到 DOM 中，因此我可以通过手动调用 nextSlide() 方法编写脚本，次数与幻灯片的数量一样多（少一个）。

最后，我将再次将呈现的 DOM 保存到数据库中（因此 Node 脚本毕竟需要 MySQL 连接 - 也许第一个选项是最好的）。

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

我对 Node 完全陌生，在浏览器之外构建 DOM 的整个想法对我来说基本上是全新的。我不介意在我的架构中引入 Node，但它只会支持在前端使用 React。

请注意，该网站每月大约有 15,000 次页面浏览，因此无需考虑大规模的可扩展性 - 我不使用任何页面缓存，因为这种流量根本不需要它。

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

有人可以指导我吗？

Answer 1

我认为您应该尝试使用 PHP 在服务器端渲染 React 组件。这是一个 PHP lib 来做到这一点。

但是，是的，您基本上需要在 PHP 代码中使用 V8js。但是，它是一种实验性的，您可能需要使用其他方法。（而且这个 "other way around" 可能正在使用 Node/Express 来呈现您的组件。Here is some thoughts on how to do it。）

Strategy for making React image gallery SEO-friendly