-1

I'm trying to do some SEO for my static React application. The problem is that react-snap that I use for pre-rendering only pre-renders the front page of my app, because that opens to user by default and doesn't change until user pushes the button. Here is a sample of my code:

function App() {
  const [page, switchPage] = useState("home");
  return (
    <div className="App">
      <div id="logo"></div>
      <div>
        <div className="btn-group">
        <button onClick={() => switchPage("home")}>Home</button>
        <button onClick={() => switchPage("news")}>News</button>
        <button onClick={() => switchPage("gallery")}>Gallery</button>
        <button onClick={() => switchPage("blog")}>Blog</button>
        <button onClick={() => switchPage("contact")}>Contact us</button>
        </div>
        {page == "home" &&
        <Home/>
        }
        {page == "news" && 
        <News/>
        }
        {page == "gallery" &&
        <Gallery/>
        }
        {page == "blog" &&
        <Blog/>
        }
        {page == "contact" &&
        <Contact/>
        }
      </div>
    </div>
  );

Unfortunately, react-snap pre-renders only the "home" component. I know this because I checked my website with online search engine simulator tools and only h2 elements on the home page are visible to search engines. I have tried to solve this problem also by using React router to set routes for each page, but so far that hasn't helped. How can I pre-render my entire app to make it visible for Google? Thanks

Edit: My index.js looks like this:

import React from 'react';
import './index.css';
import App from './App';
import { hydrate, render } from 'react-dom';

const rootElement = document.getElementById('root');
if (rootElement.hasChildNodes()) {
    hydrate(<App />, rootElement);
} else {
    render(<App />, rootElement);
}
Mr. Engineer
  • 215
  • 1
  • 9
  • 26
  • Can someone show me example on how I should use react-snap with react router to successfully pre-render every page? – Mr. Engineer Aug 06 '21 at 12:29

1 Answers1

1

react-snap doesn't just only render one page, it renders any page you use it on. Read the documentation properly https://www.npmjs.com/package/react-snap/v/1.23.0.

Other than that I'd suggest you use nextjs or gatsby if you care about SEO. Those frameworks will give you a lot more with SSR than just rendering it once.

  • I have deployed my app to a web hostel (Hostinger). I'm pretty sure that it does not support server-side rendering, so that's why I try a pre-render approach. It is working otherwise fine but makes only my front page visible to Google. – Mr. Engineer Aug 05 '21 at 19:25
  • ````react-snap```` should be rendering all the pages, not just the one page, otherwise you may have done something wrong. Also if you're using SSR you should consider using vercel which is a free host for nextjs that allows it. –  Aug 05 '21 at 19:36
  • I added my index.js to OP. The only explanation I think is that since my state variable "page" is intialized as "home page" react-snap pre-renders only it because other components are inside conditional render brackets and are rendered only when user clicks the button, so react-snap won't render them either? – Mr. Engineer Aug 05 '21 at 19:41
  • Do you actually have a "root" id in your html page? If that's not the issue then I think it's because you shouldn't create routes with state, instead use react router to create your routes, not sure if that'll help. –  Aug 05 '21 at 19:54
  • I used create-react-app to create my project, so yes, I have div with id=root. I will probably try again to use React router. I was actually advised by Facebook engineer to use conditional rendering, but I don't know if it the correct way. – Mr. Engineer Aug 05 '21 at 20:00
  • It's not the correct way, you can do conditional rendering in router as well. –  Aug 05 '21 at 20:02