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

Question

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

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

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

由 PHP 的 Controller 函数呈现如下:

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

($gallery 是 MySQL 查询的结果表)。

还有我的 .js:

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

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

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

有一个复杂的问题是，因为 React 组件只在它们第一次呈现时插入到 DOM 中(据我所知)，并且因为画廊一次只显示一张图片幻灯片，所以我不得不手动点击在保存 HTML 代码之前浏览所有幻灯片。

但是，现在替代文本可由 CMS 编辑，因此我需要自动执行此过程，或者提出更好的解决方案。

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

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

1. 从 Note 连接到 MySQL 数据库，并复制查询
2. 在 PHP 端创建一个仅返回 JSON 的响应 URL(将 SQL 查询放入一个通用函数中)
3. 在 Node 中获取整个页面，但提取 GalleryData 会很麻烦

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

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

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

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

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

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

有人可以指导我吗？

Answer 1

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

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