使用 react-snap 进行 SEO

Question

I'm using react snap for SEO.

Here's what I did.

I added the following to index.js in my react application

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);
}

Then I added the following to package.json

"postbuild": "react-snap"

When I run npm run build , and do View Source on the pages, I don't see the real time meta description and title that I need for the page.

What am I doing wrong?

Here's how I set the meta tags.

In 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>

Answer 1

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