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 渲染器用於第一次渲染。

它還沒有建成。