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

【问题标题】：Strategy for making React image gallery SEO-friendly使 React 图片库对 SEO 友好的策略
【发布时间】：2015-02-23 21:59:58
【问题描述】：

我写了一个 React 图片库或幻灯片。我需要让 alt 文本可以被搜索引擎索引，但是因为我的服务器是 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 查询的结果表）。

还有我的 .js：

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

不是最优雅的设置，但鉴于我的服务器使用 PHP，似乎没有更好的方法来做到这一点 (?)

我做了一个超级快速的破解来解决这个问题 - 我从 Firebug 复制了渲染的 HTML，并手动将它插入到数据库中的一个新表中。然后我简单地从 PHP 渲染这段代码，然后我们就可以在浏览器上继续了。

有一个复杂的情况是，因为 React 组件仅在它们第一次渲染时才插入到 DOM 中（据我了解），而且由于画廊一次只显示一张图片幻灯片，我不得不手动单击在保存 HTML 代码之前浏览所有幻灯片。

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

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

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

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

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

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

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

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

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

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

【问题讨论】：

您确定 React 非常适合您当前的技术堆栈吗？只有在客户端请求新数据时才可以使用 React。
vs Backbone，例如，还是 vs nothing/jQuery？我的 React 图像库是我编写的更优雅的代码之一 - React（或 Javascript 端的任何等效应用程序框架）的好处很容易看到。也许 Backbone 会更容易插入？但不知何故，我怀疑总体上不会更容易。
尝试将基于 PHP 的系统与 JavaScript 框架相匹配可能不是最佳选择……无论您选择了哪一个。
Displaying a server side rendered reactJS component within a PHP application 的可能重复项
React 是做你正在做的事情的完美选择。我认为没有理由用半生不熟的库替换它。实际上，我认为您还应该将 React 用于您的画廊内容而不是 jQuery 插件（我记得您发布过类似的内容。如果您不是，请道歉:)）

【解决方案1】：

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

但是，是的，您基本上需要在 PHP 代码中使用 V8js。但是，它是一种实验性的，您可能需要使用其他方法。（而这种“其他方式”可能正在使用 Node/Express 来渲染您的组件。Here is some thoughts on how to do it。）

【讨论】：