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

所以这是一个相当新的主题，React服务器组件最近发布了，与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服务器组件更受欢迎？

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

经典React SPA的情况是，它加载React组件（本质上是JS函数）作为JS包的一部分，然后开始以JSON格式从后端请求数据。获取JSON后，通过React组件函数呈现JSON并将其插入DOM。现代的爬虫程序使用V8引擎（如果是Bing:D，也可以使用smth），它们等待页面完全加载，所有JSON数据都加载，所有组件都被实际呈现，然后爬虫生成的DOM

谷歌机器人这样爬行水疗至少已经3年了，可能更久了——所以如果你认为SSR对于SEO是必不可少的，不，它不是。对这个随机的例子进行了大量的调查：

---

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

服务器组件是对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渲染器

---

它还没有构建。

这里唯一的细微差别是，对于服务器组件和SSR，它不会是“非此即彼”的。react团队非常强调，您可以同时使用它们，因此您可以使用SSR在第一页加载时看起来像一个完全由服务器呈现的应用程序，然后您的应用程序将成为一个常规的react应用程序（包含客户端和服务器组件），尽管服务器组件呈现为更丰富的格式，这在很大程度上是一个计划的一部分，有一个HTML流式渲染器，它使用这种格式并发出HTML。但是，在搜索引擎优化和爬网的环境中，它真的很重要吗？哪种格式在网络上使用，HTML字符串还是smth其他格式？我想没有。GoogleBot无论如何都会对其进行爬网（在它被插入DOM之后）：）据我所知，呈现为HTML更适合爬网，因为它会更快地被索引。一旦你有了HTML呈现器，内容能在页面源代码中可见吗？