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

Question

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

由于组件是在请求时在服务器上动态呈现的，所以它并不像Next.js那样是静态的，如果我使用它，搜索引擎会不会无法索引这些组件？

一个演示可以找到here

我们可以在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

服务器组件是对呈现为的的补充，而不是替代方案。我们的计划是两者兼得。

未发布服务器组件。在分享我们的研究成果的精神下发布的是一个早期的技术预览。此预览不包含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渲染器。

它还没有建好。

Answer 2

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

经典React SPA的作用是，它加载React组件(本质上是JS函数)作为JS包的一部分，然后开始以JSON格式从后端请求数据。在获取JSON之后，它通过React组件函数呈现并插入到DOM中。现代爬虫使用V8引擎(或者如果是Bing :d，可能是smth )，它们等待页面完全加载，所有JSON数据都加载，所有组件都实际呈现-然后爬行生成的DOM。

GoogleBot以这种方式爬行SPA至少有3年了，可能更长--所以如果你认为SSR对于搜索引擎优化是必不可少的，不，它不是。对此有大量的调查，随机的例子：https://medium.com/@l.mugnaini/spa-and-seo-is-googlebot-able-to-render-a-single-page-application-1f74e706ab11

因此，从本质上说，对于crawler来说，React组件是如何呈现的并不重要。对于React Server组件，组件函数驻留在服务器上，并且永远不会作为JS包的一部分传输到客户端。因此，应用程序请求的不是JSON数据，而是某种中间格式的呈现组件(而不是HTML btw)。其结果被传输到客户端，并被呈现给DOM。所以最终的结果仍然是一样的--它是机器人可以抓取的一些DOM元素。