元标记服务器端渲染

Question

我正在使用react helmet，但在服务器端渲染方面有点迷茫。如果我在 google 控制台中查看元素，我可以看到标题和元描述，但在查看页面源时它们不存在。

我正在使用带有 express 的 Node.js 后端来创建 API。 React 应用程序只是一个从 Node.js API 获取数据的前端应用程序。

在 React 中我只有：

import { Helmet } from "react-helmet";
render() {
   return(
      <>
        <Helmet>
          <title>My site title</title>
          <meta name="description" content="Helmet application" />
        </Helmet>
      </>
    )
}

服务器端示例的direct link 显示了一些我真的不知道该怎么处理的代码。我认为“服务器”这个词让我很反感，因为我认为我需要在我的 Node.js 服务器上放置一些代码，但也许情况并非如此？

Answer 1

确实，Helmet.renderStatic() 方法会收集与您请求的页面对应的所有标签。

如果您也想在服务器端查看这些标签（源代码），您需要在服务器文件中：

1. 致电const helmet = Helmet.renderStatic()

2. 从helmet得到helmet.title.toString()和helmet.meta.toString()

3. 像https://github.com/nfl/react-helmet#server-usage As string input 描述的那样将这些附加到您的HTML。