与 CRA 相比,Next.js 如何改进 SEO?

How does Next.js improve SEO in comparison with CRA?

我是这个框架的新手,在通过交互式学习后,我对 Next.js 处理 SEO 问题的方式有一些疑问。

  1. Next.js 大胆的能力是它能够在服务器端呈现 React 组件,但是,据我所知,它只呈现 first 在服务器端请求,而其他请求将在客户端呈现,那么它在 SEO 友好方面比通常的 CRA 做得更好的地方是什么?
  2. 根据第一个假设,像 google 这样的抓取工具会访问我们的网站,然后将第一个响应作为完整的 HTML 页面接收回来,但是对于接收页面内的其他连续链接,它应该使用 Javascript(这是 SEO 的主要致命弱点)执行客户端渲染,因此除了第一个请求外,CRA 和 Next.js 没有区别,对吗?
  3. 如果之前的假设是正确的,那么我们如何在页面内使用对 Google 这样的爬虫 SEO 友好的链接?
  1. 如您所述,Next.js 仅在服务器端呈现 第一个 请求。

现代爬虫能够爬取客户端应用程序,因此它们在 Next 和 CRA 之间没有区别,但是,有一些限制(例如首次下载大小)可能会回退到“旧”爬取模式,这是收集所有链接,并分别请求它们。这意味着 Next.js 将对每个请求进行 SSR,而 CRA 不会。 此外,许多爬虫开始关注其他参数,例如性能(例如First Paint),哪个SSR版本会获得更好的分数。

  1. 没有人可以肯定地说 Google 机器人会表现得像这样,它可能以不同的方式工作,正如我在 #1 中解释的那样。

Render first page, (ssr version), collect links, and render each page separately (ssr version as well).

  1. 关于 Next.js Link 组件的一个很酷的想法是它包装了 一个合适的锚点 ,并设置了一个正确的 herf 这意味着机器人将能够在没有启用 JS 的情况下以“旧”方式运行,如果启用 JS,它将呈现得更快(它有一些优化,例如预加载下一页等......)