reactjs - 带解耦 CMS 的头盔（Drupal）

Question

我用 React 应用程序在 CMS (Drupal) 上建立了一个站点。我使用 Helmet 从我的组件/子组件生成元数据（标题/描述）。

在我使用此代码的组件中：

  <Helmet>
    <title>{...my custom title...}</title>
    <meta name="description" content={...my custom description...} />
  </Helmet>

如果我在 Chrome 的开发工具中分析代码，我会看到元数据已更新。

如果我分析页面的源代码，则元数据不会更新。这些元数据是在 React 应用程序之外的 HTML 部分中生成的。因此，元数据标题和描述保持默认值。

在 HTML 部分“更新”元数据的好方法是什么？我只需要更新特定的元数据（标题、描述、规范......），头部的其他元素由 CMS 生成。

感谢您的食谱和帮助。

score 0 · Accepted Answer

您混淆了客户端代码和服务器端代码。除非您使用 SSR（服务器端渲染）您的页面，否则 Helmet 将在客户端运行（使用 javascript 更新 DOM）。因此，当您查看页面的来源时，您将看不到 CMS 中的标题和描述。

好消息是，当今大多数爬虫都可以运行 javascript 并读取您的头盔元数据。

因此，要回答您的问题：您需要在服务器端渲染您的反应并在前端对其进行水合，以查看 html 源代码中的头盔输出。

另一种解决方案是在服务器端仅渲染页面的外壳（head body 和一个带有 id 用于 react 的 div）并控制<head>react 之外的部分。它比服务器端渲染反应要容易一些。

1 回答 1