带有 React Suspense Boundaries 的 Next.js UI Streaming 会影响 SEO 和爬虫看到的序列化 html 吗？

Question

我一直在探索 Next.js 官方文档关于他们添加的 UI Streaming 功能，他们明确提到此功能不会影响 SEO，但我想知道爬虫在访问我的页面时会看到什么以及哪一部分会被纳入SEO吗？它是等待 UI 流完成还是只看到最初从服务器发送到客户端的准备就绪的 html？

鉴于下面的示例，我想知道爬虫在访问我们的页面时看到的页面源和序列化 html。是带有暂停组件占位符的

p

标签还是 UI 流的最终结果？

对于尚未部署的项目，有没有什么方法或工具可以保证本地化？

const HomePage = async () => {
  return (
    <>
      <p>ready to serve html content does not any data to be fetched...</p
      <Suspense fallback={<div>loading...</div>}>
        <Cards /> {// this component performs an async action}
      </Suspense>
    </>
  );
};

export default HomePage;

Answer 1

在对这个主题进行了大量研究之后，我发现幕后发生的事情是首先从服务器发送准备好提供服务的 HTML 部分，但连接保持打开状态。一旦获取数据，其他部分将被渲染并通过同一连接发送，从而导致流式 HTML 包含在最终结果中。另一个要回答的问题是爬虫是否理解这一点。像谷歌爬虫这样的现代爬虫能够检测并等待流媒体以合理的超时结束。因此，最终，如果没有意外发生，流媒体不会损害您网站的 SEO，并且确实可以增强您的 TTFB，从而获得更好的分数。

• 请注意，长时间运行的流可能会对您的网站造成影响。

为了进一步扩展我对流的理解，我开始使用 React 和 Express.js 实现我自己版本的服务器端渲染和 UI 流，您可以在 medium.com.

阅读相关内容

您可以使用丰富的结果文本自行测试。

其他资源：

• https://webmasters.stackexchange.com/questions/136219/seo-crawlability-impact-of-html-streaming

• https://github.com/vercel/next.js/discussions/50829

• https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming