seo Question posted in
Some basic information to get you started with this can be found here.

React useEffect() hook highly affects SEO

I have a static website made with react that requests data from the backend in the useEffect() hook:

export default const App = () => {
    const [data, setData] = useState("");
    
    useEffect(() => {
        server.get().then(data => {
          setData(data)
         })
     })
    
    return(
      <title>{data}</title>
      <h1>{data}</h1>
    )
}

However, when Bing crawls the webpage, the following problem occurs:

Bing Screenshot:

<title></title>
<h1></h1>

How can I solve this issue?

Tags:

2

Answers


  1. 0

    React isn’t used for static sites. If you’d like to have better SEO and server-side rendering you can use nextjs.

    The way your app is setup currently will only return some HTML with and empty body to a GET request to / (which is what I suppose crawlers like the one you mentioned use) and starts rendering components after the JavaScript is loaded.

    But if you decide on a server-side rendering approach, whenever a request is made to your app the server will first render the app on it’s side and the return an HTML string with the rendered components.

    Login or Signup to reply.
  2. 0

    Did you check if your server.get() is returning some data? I can’t see any url here, so maybe it’s actually returning nothing.

    Even so, maybe you forgot to pass the second argument of useEffect, which is an array of arguments, which this hooks uses to trigger itself. For example, if you want to trigger only once, when component is mounted, you need to pass [] as second argument of useEffect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search