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

Question

我已经创建了我的 react js 应用程序并完成了它并托管了它，但是我的 seo 失败了，因为我的页面没有被抓取并在谷歌中显示

next.js 会解决我的 google bot 无法抓取我的网站的问题吗

我的网站就像 stackoverflow 一样问答，所以每当我发布问题时，都会生成一个新的 url

下个js会解决这个问题吗

这就是我在我的反应应用程序中阅读网址的方式

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

我在我的项目中也使用过 react-helmet

 <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 绝对可以解决您的问题。

查看 Next.js 文档中的数据获取页面。 它很好地解释了服务器端生成（SSG）和服务器端渲染（SSR）的概念。 任何一个都应该大大提高您的 SEO 分数。 我在我的应用程序中进行了类似的重构，使用 SSG 方法从 a.js 文件呈现 static 数据，我对 Google 流量的结果非常满意。 （如果您愿意，请查看 - ilmihal oku）

Answer 2

要了解非 js 感知 web 爬虫将在您的站点中看到的内容，请禁用浏览器选项卡的 Javascript。

当您使用客户端呈现的 React 应用程序时，它是空的。 这意味着HTML由附加到index.html的Javascript生成。 由于您禁用Javascript ，因此不会向DOM添加任何内容。

如果你真的检查 index.html 文件，它除了以root为id () 的div之外什么都没有。

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

解决方案

1. 谷歌机器人也会抓取 Javascript 。 您可以保持客户端呈现的应用程序原样并依赖这种类型的抓取。 但是，您仍然需要为您的站点提交一个sitemap.xml 。

2. 创建一个简单的快速服务器，当 HTML 骨架第一次到达服务器时呈现它。 基本上，您可以通过访问build文件夹中的index.html并调用ReactDOMServer.renderToString(<YourReactAppRootComponent>)并将HTML发送到浏览器来完成。 现在，即使您在浏览器选项卡中禁用了 JS，您（或 web 爬虫）也会看到一些内容。 检查这篇文章

3. 您可以使用迁移到像next.js或Gatasby这样的 React 框架来为您执行 SSR。