Added react-snap to a react project and unlinked pages and 404 are not loading with correct content

Question

Recently moved to react-snap on a react site (so I can live that meta tag preview life if anyone shares links to my work).

A weird issue I'm having is that my unlinked pages, especially my 404 page is loading some of the content from my home page, and is not updating to the correct id tag, hero image or correct CSS styling for the page.

I have a link page (similar to the linktree pages you see on social) that was previously broken and when I added the page to the site navigation it now renders correctly.

Any ideas on how to get the 404 page to load correctly? Do I need a sudo 404 page that's crawled and if anyone loads the actual 404 page from a broken link it will render correctly?

The component is at the bottom of my Switch group as: Route component={Page404}

Correct page render: https://dangerhuskie.com/works/varsity-pumpkinhead

View for the broken 404: https://dangerhuskie.com/farts

If you go from the 404 to another page and then browser back button to it, it renders correctly.

Answer 1

Run into a similar issue and couldn’t find an answer here thinking it was related to react-snap. It actually was an issue with how I was using React.hydrate. In case anyone else is having problems with this, this article is a good read and provides a good solution https://www.joshwcomeau.com/react/the-perils-of-rehydration/

Long story short, adding

const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }

in your component should help.