与 CRA 相比,Next.js 如何改进 SEO?
How does Next.js improve SEO in comparison with CRA?
我是这个框架的新手,在通过交互式学习后,我对 Next.js 处理 SEO 问题的方式有一些疑问。
Next.js
大胆的能力是它能够在服务器端呈现 React
组件,但是,据我所知,它只呈现 first 在服务器端请求,而其他请求将在客户端呈现,那么它在 SEO 友好方面比通常的 CRA 做得更好的地方是什么?
- 根据第一个假设,像 google 这样的抓取工具会访问我们的网站,然后将第一个响应作为完整的 HTML 页面接收回来,但是对于接收页面内的其他连续链接,它应该使用 Javascript(这是 SEO 的主要致命弱点)执行客户端渲染,因此除了第一个请求外,CRA 和 Next.js 没有区别,对吗?
- 如果之前的假设是正确的,那么我们如何在页面内使用对 Google 这样的爬虫 SEO 友好的链接?
- 如您所述,
Next.js
仅在服务器端呈现 第一个 请求。
现代爬虫能够爬取客户端应用程序,因此它们在 Next 和 CRA 之间没有区别,但是,有一些限制(例如首次下载大小)可能会回退到“旧”爬取模式,这是收集所有链接,并分别请求它们。这意味着 Next.js
将对每个请求进行 SSR,而 CRA 不会。
此外,许多爬虫开始关注其他参数,例如性能(例如First Paint),哪个SSR版本会获得更好的分数。
- 没有人可以肯定地说 Google 机器人会表现得像这样,它可能以不同的方式工作,正如我在 #1 中解释的那样。
Render first page, (ssr version), collect links, and render each page
separately (ssr version as well).
- 关于
Next.js
Link 组件的一个很酷的想法是它包装了 一个合适的锚点 ,并设置了一个正确的 herf
这意味着机器人将能够在没有启用 JS 的情况下以“旧”方式运行,如果启用 JS,它将呈现得更快(它有一些优化,例如预加载下一页等......)
我是这个框架的新手,在通过交互式学习后,我对 Next.js 处理 SEO 问题的方式有一些疑问。
Next.js
大胆的能力是它能够在服务器端呈现React
组件,但是,据我所知,它只呈现 first 在服务器端请求,而其他请求将在客户端呈现,那么它在 SEO 友好方面比通常的 CRA 做得更好的地方是什么?- 根据第一个假设,像 google 这样的抓取工具会访问我们的网站,然后将第一个响应作为完整的 HTML 页面接收回来,但是对于接收页面内的其他连续链接,它应该使用 Javascript(这是 SEO 的主要致命弱点)执行客户端渲染,因此除了第一个请求外,CRA 和 Next.js 没有区别,对吗?
- 如果之前的假设是正确的,那么我们如何在页面内使用对 Google 这样的爬虫 SEO 友好的链接?
- 如您所述,
Next.js
仅在服务器端呈现 第一个 请求。
现代爬虫能够爬取客户端应用程序,因此它们在 Next 和 CRA 之间没有区别,但是,有一些限制(例如首次下载大小)可能会回退到“旧”爬取模式,这是收集所有链接,并分别请求它们。这意味着 Next.js
将对每个请求进行 SSR,而 CRA 不会。
此外,许多爬虫开始关注其他参数,例如性能(例如First Paint),哪个SSR版本会获得更好的分数。
- 没有人可以肯定地说 Google 机器人会表现得像这样,它可能以不同的方式工作,正如我在 #1 中解释的那样。
Render first page, (ssr version), collect links, and render each page separately (ssr version as well).
- 关于
Next.js
Link 组件的一个很酷的想法是它包装了 一个合适的锚点 ,并设置了一个正确的herf
这意味着机器人将能够在没有启用 JS 的情况下以“旧”方式运行,如果启用 JS,它将呈现得更快(它有一些优化,例如预加载下一页等......)