由于站点映射和 seo，我应该从 react.js 将 swich 更改为 next.js

Question

i have created my react js app and have complted it and is hosted but i have faild with seo because my pages are not getting crawled and showing in google i saw some videos and every one is saying to use next js for something called server side rendering

will next.js solve my problem of google bot not crawling my website

my website is question and answersing just like stackoverflow so when ever i post a question a new url is generted

will this issue be solved by next js

this is how i am reading the urls in my react ap

<Link to={{pathname: `query/${itm._id}`,query: { id: itm._id },}} >
                <Alert className="question">
                  <h6>{itm.Name}</h6>
                </Alert>
</Link> 

i have used react-helmet also in my project

 <Helmet>
                  <meta charSet="utf-8" />
                  <title> wixten - {itm.Name} </title>
                  <meta name="description" content={itm.Name} />
                  <meta property="og:type" content="article" />
                  <link rel="canonical" href={itm.Name} />
                </Helmet>

https://wixten.com/

Answer 1

Next.js would definitely solve your problem.

Check out Data Fetching page in the Next.js documentation. It explains the concept of Server Side Generation (SSG) and Server Side Rendering (SSR) very well. Either one should improve your SEO score greatly. I've done a similar refactoring in my app that renders a static data from a.js file using SSG method and I am pretty happy with the results in Google traffic. (check it out if you'd like - ilmihal oku)

Answer 2

To get an understanding of what a non-js aware web crawler will see in your site is to disable the Javascript for the browser tab.

It is empty as you are using client rendered React app. That means HTML is generated by the Javascript attached to index.html . Since you disabled Javascript nothing is added to the DOM .

If you really check the index.html file it has nothing except the div with root as id ().

<div id="root"></div>

Solutions

1. Google bots crawl Javascript as well. You can keep your client-rendered app as it is and rely on this type of crawling. But, you still need to submit a sitemap.xml for your site.

2. Create a simple express server that renders the HTML skeleton when it hits the server for the first time. Basically, You can do it by accessing index.html in build folder and calling ReactDOMServer.renderToString(<YourReactAppRootComponent>) and send the HTML to the browser. Now even though you have disabled the JS in the browser tab, you (or a web crawler) will see some content. Check this article

3. You can use migrate to a React framework like next.js or Gatasby to do SSR for you.