React 服务器组件在 SEO 上的性能

Question

所以这是一个比较新的话题，最近发布了React Server Components，对比SSR/Next.js，它对SEO有什么影响？

由于组件在请求时在服务器中动态呈现，因此它不像Next.js那样像SSR那样静态，如果我使用它，搜索引擎会无法索引这些组件吗？

可以在此处找到演示

我们可以看到，在api.server.js，

async function renderReactTree(res, props) {
  await waitForWebpack();
  const manifest = readFileSync(
    path.resolve(__dirname, '../build/react-client-manifest.json'),
    'utf8'
  );
  const moduleMap = JSON.parse(manifest);
  pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

function sendResponse(req, res, redirectToId) {
  const location = JSON.parse(req.query.location);
  if (redirectToId) {
    location.selectedId = redirectToId;
  }
  res.set('X-Location', JSON.stringify(location));
  renderReactTree(res, {
    selectedId: location.selectedId,
    isEditing: location.isEditing,
    searchText: location.searchText,
  });
}

我知道这可以帮助减少客户端设备的工作量，因为组件在服务器上呈现并发送到客户端，并且组件可以使用存储在服务器中的秘密来呈现，因为我们可以将其作为道具传递而不是我们将秘密发送给客户。

但如果 SEO 很重要，SSR 是否比 React Server 组件更受欢迎？

Answer 1

服务器组件是对 HTML 渲染的补充，而不是替代。我们的计划是两者兼得。

\n

服务器组件未发布。本着分享我们研究的精神，发布的是早期技术预览。此预览版\xe2\x80\x99不包含 HTML 渲染器。这api.server.js包含对此的评论：

\n

    const html = readFileSync(\n      path.resolve(__dirname, '../build/index.html'),\n      'utf8'\n    );\n    // Note: this is sending an empty HTML shell, like a client-side-only app.\n    // However, the intended solution (which isn't built out yet) is to read\n    // from the Server endpoint and turn its response into an HTML stream.\n    res.send(html);\n

\n

当服务器组件正式发布时，将有一个用于第一次渲染的流式 HTML 渲染器。

\n

它\xe2\x80\x99s 尚未构建。

\n

Answer 2

从SEO的角度来看，它应该与SPA相同。

经典的 React SPA 的情况是，它加载 React 组件（本质上是 JS 函数）作为 JS 包的一部分，然后开始以 JSON 格式向后端请求数据。获取 JSON 后，它会通过 React 组件函数进行渲染并插入到 DOM 中。现代爬虫使用 V8 引擎（或者可能是其他引擎，如果是 Bing :D），它们会等到页面完全加载、所有 JSON 数据加载并且所有组件实际渲染 - 然后爬取生成的 DOM。

GoogleBot 以这种方式抓取 SPA 已经至少 3 年了，甚至可能更久 - 所以如果您认为 SSR 对于 SEO 至关重要，不，事实并非如此。对这个随机示例进行了大量调查：https://medium.com/@l.mugnaini/spa-and-seo-is-googlebot-able-to-render-a-single-page-application-1f74e706ab11

所以本质上对于爬虫来说，React 组件的渲染方式并不重要。对于 React 服务器组件，组件功能驻留在服务器上，并且永远不会作为 JS 包的一部分传输到客户端。因此，应用程序不是请求 JSON 数据，而是请求某种中间格式（不是 HTML）呈现的组件。结果会传输到客户端并渲染到 DOM。所以最终的结果仍然是一样的 - 这是机器人可以抓取的一些 DOM 元素。