使用 react-snap 进行 SEO答案

【问题标题】：Using react-snap for SEO使用 react-snap 进行 SEO
【发布时间】：2019-12-16 19:10:51
【问题描述】：

我正在使用 React snap 进行 SEO。

这就是我所做的。

我在我的 react 应用程序中的 index.js 中添加了以下内容

import React from 'react';
import { hydrate, render } from "react-dom";

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
    hydrate(<App />, rootElement);
} else {
    render(<App />, rootElement);
}

然后我将以下内容添加到 package.json

"postbuild": "react-snap"

当我运行npm run build 并在页面上查看源代码时，我看不到页面所需的实时元描述和标题。

我做错了什么？

这是我设置元标记的方法。

在 BookDetail.jsx 中

import {Helmet} from "react-helmet";
<Helmet>
    <meta charSet="utf-8" />
    <title>{this.state.book.title} by {this.state.book.author} | Sumizeit</title>
    <meta name="description" content={this.state.book.desc}/>
</Helmet>

【问题讨论】：

你是如何设置元标签的？另外，“实时元描述”是什么意思？我有一个和你类似的代码，它与 React Helmet 配合得很好。
@Gasim 查看编辑
根据您的代码，我猜您正在通过 AJAX 加载数据，这不是“确定性的”。 React snap 只渲染应用程序一次并将 HTML 快照到单独的文件中。它不会等待 AJAX 请求或任何效果（例如动画、超时）。所以，这是我的问题。你想做什么？如果你想获得类似 gatsby 的 react snap 体验，你需要实现自己的“查询”系统。您可能还想启用 cacheAjaxRequests 选项，因为它可能会捕获 Ajax 数据。
我只是想创建一个适用于 SEO 的 React 应用。
这里使用 NextJS 可能更合理，因为 Next 将在服务器中加载数据并动态提供标记。 React snap 将从所有站点（如 Gatsby）创建静态页面；所以，如果你在那里需要 Ajax，你可能需要加载不同于普通 React 应用程序的 Ajax。

标签： reactjs react-snap

【解决方案1】：

不要使用 react-snap 只需更改为 next.js （react-snap 有很多问题：受保护路由上的刷新错误，构建时间不是开玩笑，内联 css）...顺便说一句，您的代码没有任何问题

【讨论】：