时间戳

首页 > 解决方案 > 元标记服务器端渲染

reactjs - 元标记服务器端渲染

问题描述

我正在使用反应头盔，对服务器端渲染有点迷茫。如果我在 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>
      </>
    )
}

到服务器端示例的直接链接显示了一些我真的不知道该怎么处理的代码。我认为“服务器”这个词让我失望，因为我认为我需要在我的 Node.js 服务器上放置一些代码，但也许不是这样？

标签： reactjsreact-helmet

解决方案

实际上，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 中。

推荐阅读