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

Question

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

由于组件在被请求时动态呈现在服务器中，因此它不像 static 那样像 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 服务器组件？

Answer 1

从 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 服务器组件，组件 function 驻留在服务器上，并且永远不会作为 JS 包的一部分传输到客户端。 因此，应用程序请求以某种中间格式（不是 HTML 顺便说一句）呈现的组件，而不是请求 JSON 数据。 结果被传输到客户端并被渲染到 DOM。 所以最终结果还是一样的——机器人可以抓取一些 DOM 元素。

Answer 2

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

服务器组件未发布。 本着分享我们研究的精神，发布的是早期技术预览。 此预览版不包括 HTML 渲染器。 您提到的演示中的api.server.js文件包含对此的评论：

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

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

它还没有建成。