2

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>
Chris Hansen
  • 7,813
  • 15
  • 81
  • 165
  • How are you setting the meta tags? Also, what do you mean by "real-time meta descriptions"? I have a code similar to yours and it works perfectly fine with React Helmet. – Gasim Dec 16 '19 at 19:50
  • @Gasim see edits – Chris Hansen Dec 16 '19 at 20:12
  • Based on your code, my guess is that you are loading data via AJAX, which is not “deterministic.” React snap just renders the application once and snapshots the HTML into separate files. It does not wait for AJAX requests or any effects for that matter (e.g animations, timeouts). So, here is my question. What are you trying to do? If you want a gatsby like experience with react snap, you need implement your own “querying” system. You might also like to enable [`cacheAjaxRequests`](https://github.com/stereobooster/react-snap#ajax) option as it might capture Ajax data. – Gasim Dec 16 '19 at 21:20
  • 1
    i'm just trying to create a react app that works well with SEO. – Chris Hansen Dec 16 '19 at 21:59
  • It might be more plausible to use NextJS here because Next will load the data in the server and serve the markup dynamically. React snap will create static pages from all the sites (like Gatsby); so, if you need Ajax there, you might need to load Ajax different than a normal React app. – Gasim Dec 17 '19 at 08:18
  • Have any progress about this problem? I face same issue and stuck now. I do not even use ajax, just get text from url. – phongnt Mar 26 '21 at 04:51

1 Answers1

1

do not use react-snap just change to next.js (react-snap so many problems: refresh error on protected routes, build time no joke, inline css)...by the way there is nothing wrong in your code

Suprim Golay
  • 11
  • 1