是否可以使用worker_threads創建異步renderToString？

Question

我一直在考慮如何優化反應服務器端渲染，特別是我的應用程序的瓶頸部分，即同步renterToString調用。 因為這是一個阻塞調用，所以具有長函數renderToString調用會導致我的應用程序的吞吐量受到相當大的影響。

我發生了一個帖子（這里用谷歌翻譯從中文翻譯成英文），提出了一個假設，即使用worker_threads卸載renderToString並使其成為異步。

https://translate.google.com/translate?hl=en&sl=zh-CN&u=https://cnodejs.org/topic/5b2e596557137f22415c4e63&prev=search

我想測試這個功能，似乎有一個阻止因素，因為無法克隆符號，因此無法將符號作為數據傳遞給工作者：

DataCloneError: Symbol(react.element) could not be cloned.

以下是設置工作線程/服務器呈現邏輯的示例代碼：

// asyncRenderer.js
const { Worker, isMainThread, parentPort, workerData } = require('worker_threads');

if (isMainThread) {
  module.exports = async function asyncRenderToString(component) {
    return new Promise((resolve, reject) => {
      const worker = new Worker(__filename, {
        workerData: component,
      });
      worker.on('message', resolve);
      worker.on('error', reject);
      worker.on('exit', (code) => {
        if (code !== 0) {
          reject(new Error(`Worker stopped with exit code ${code}`));
        }
      });
    });
  };
} else {
  const { renderToString } = require('react-dom/server');
  const HTML = renderToString(workerData);
  parentPort.postMessage(HTML);
}


// server.jsx
const asyncRenderer = require('./asyncRenderer');
...
const html = await renderToString(<App/>);
// Return the html

我很想知道是否有可能為此目的使用worker_threads，如果是這樣，設置渲染器/工作線程的最佳方法是什么。

Answer 1

我很想知道是否有可能為此目的使用worker_threads，如果是這樣，設置渲染器/工作線程的最佳方法是什么。

首先，通常，worker_threads適用於CPU密集型工作（如此），其中並行性和共享內存是有用的。

在這種特殊情況下，簡單地旋轉多個Node.js進程同樣有效。

此外，由於ReactDOMServer渲染速度非常慢 - 您幾乎總是必須在React（或Vue或Angular）中將服務器端渲染放在緩存之前。 因此，這是一種更容易提高性能的方法。

至於你如何在這里使用worker_threads，它失敗了，因為你將組件傳遞給它。 相反，我會將路徑或組件名稱傳遞給它，並讓它require該組件。

或者，您可以自己序列化組件並在另一側對其進行去病毒化。 符號需要唯一性，因此我們不會在Node.js中的工作符之間移動時默認克隆它們。 這是你看到的錯誤。