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

<div id=root></div> shows blank source code in React? – SEO

I am creating a mern stack application and ı have problems as shown in the pictures

Here is what shows when ı press ctrl + U in chrome

enter image description here

Here is what shows in dev tools
enter image description here

My app is still in development mode and is this affects seo ? and how can ı render in source code what shows in dev tools ?
Thanks

Tags:

2

Answers


  1. 0

    That happens because a ReactJS is rendered using JS. It means that the DOM will be updated using JS. When you open it with ctrl + U you’re looking only to the HTML document, without any changes made by the JS engine.

    I don’t think leaving it like this will affect SEO, but you you can use server-side rendering to achieve what you want.

    Login or Signup to reply.
  2. 0

    it’s happening because the jsx we write are actually closer to js than html,
    after we ship the code the we send the js and only the root div.
    as the js executes in browser the div gets populated.

    now it has effects on SEO,
    you won’t get any preview of your website if you share it on any social media if you go with raw react.
    if it’s a blog, or some documentation page I would suggest you look up static generation or server-side rendering and go with nextjs or gatsbyjs.

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

Back To Top
Search