当我们在 NextJs 应用程序中更改路线时，后续页面是否也可抓取（SEO）？

Question

据我了解，当访问 NextJs 页面时，服务器（SSR）会渲染并发送 HTML 以及必要的 javascript，以在客户端水合页面。这使得页面 SEO 友好。

但是，当我们更改路线（例如“/about”）时，它实际上并不发送 HTML 文件，而只是发送 about.js （内容类型：application/javascript）文件（查看文件，它看起来像 React VirtualDOM，但我不确定）。这被绘制在 DOM 上，我们看到关于页面。

那么，我的问题是——

Answer 1

我假设您具体询问组件的客户端转换next/link。

从历史上看，让 SEO 能够直接在 SSR 生成的 HTML 中访问所有内容非常重要，因为爬虫不会执行 javascript，除了从服务器直接返回的内容之外看不到任何内容。如今，一些爬虫（例如 Google）可以完全执行 JavaScript，因此可以看到用户在浏览器中看到的任何内容。

你可以说并不是所有的爬虫都这么做，SSR 仍然有优势。幸运的是，NextJs 为您提供了两全其美的功能：

当您使用该next/link组件时，例如

<Link href='/about'>About Us</Link>

那么您从服务器端渲染看到的结果标记将是

<a href="/about">About Us</a>

如果您单击该链接，nextJS 会阻止浏览器向 /about 发出请求（使用event.preventDefault();），并使用内置路由器来处理该操作，以在客户端上呈现新页面。但是，如果您直接访问 /about（将其输入到浏览器的网址栏中），那么您将获得服务器端为其生成的响应。

就位后：

执行 JavaScript 并通过模拟点击事件进行导航的爬虫也能够读取生成的客户端呈现内容。
不执行 JavaScript 且仅将您的内容视为“纯文本”的爬虫仍然可以理解您的<a>标签并通过发出新请求来跟踪它们。在这种情况下，不会发生客户端转换，结果将在服务器端呈现。

话虽如此，Google 关于如何使链接可抓取的文档似乎暗示它不会模拟<a>标签上的点击事件，而是对其在 href 属性中找到的 url 发出新请求：

由于脚本事件，Google 无法跟踪没有 href 标记或执行链接的其他标记的链接。[...]确保您的代码链接到的网址是 Googlebot 可以向其发送请求的实际网址 [...]

所以总的来说，NextJs 路由是 SEO 友好的，无论它是如何爬行的。