Support non-blocking rendering (Node/Web Workers)

Describe the bug React PDF rendering hogs the main thread on a Hapi web server, blocking other operations, e.g. HTTP responses and resulting in HTTP 500/503 errors

To Reproduce Render a document to PDF by streaming ReactPDF.renderToStream to Node’s HTTP response (which takes >5000ms) while also trying to handle lots of normal incoming HTTP requests 🤣 (I can provide a reproducible sample if needed)

Expected behavior Ideally, ReactPDF.renderToStream would optionally return a Promise resolving to a stream that didn’t block the main thread. This could be by delegating the actual PDF creation to another thread, like in a Worker thread in Node or a Web Worker in the browser. Although Node seems a higher priority right now, it seems it would be relatively trivial to code for both. We could then stream the PDF back to the calling thread.

I have started working on a solution along these lines but wanted to see if this sounds like a good approach to take. Let me know what you think @diegomura and other contributors.

[kidroca]

I’ve successfully used a web worker that uses react-pdf/render to generate a multiple PDF documents in a batch

Here’s how that looks like

web.worker.js

import * as Comlink from 'comlink';
import { pdf } from '@react-pdf/renderer';
import JSZip from 'jszip';

/* This prevents live reload problems during development
* https://stackoverflow.com/questions/66472945/referenceerror-refreshreg-is-not-defined */
if (process.env.NODE_ENV != 'production') {
  global.$RefreshReg$ = () => {};
  global.$RefreshSig$ = () => () => {};
}

let progressCb = console.info;

const generateAll = async (patients = []) => {
  const archiveBuilder = new JSZip();

  progressCb({ progress: 1, current: 0, total: patients.length });

  for (let i = 0; i < patients.length; i++) {
    const patient = patients[i];

    const { fileName, pdfBlob } = await generateSingle(patient);
    archiveBuilder.file(fileName, pdfBlob);

    const current = i + 1;
    const progress = (current / patients.length) * 100;
    progressCb({ progress, current, total: patients.length });
  }

  const zipBlob = await archiveBuilder.generateAsync({ type: 'blob' });
  return zipBlob;
};

const generateSingle = async (patient) => {
  // This is a react-pdf/renderer document: <Document><Page>...</Page></Document>
  const { BillingReportDocument } = require('../../../pdf/PdfBillingReport');

  const document = <BillingReportDocument patient={patient} />;
  const { id, data } = patient;
  const fileName = `Report {id}.pdf`;

  const pdfBuilder = pdf(document);
  const pdfBlob = await pdfBuilder.toBlob();
  return { pdfBlob, fileName };
};

const onProgress = cb => (progressCb = cb);

Comlink.expose({
  generateAll,
  generateSingle,
  onProgress,
});

ExportReports.js

import * as Comlink from 'comlink';
import { saveAs } from 'file-saver';
import { useAsyncCallback } from 'react-async-hook';
/* eslint-disable import/no-webpack-loader-syntax */
import Worker from 'worker-loader!./web.worker.js';

import ActionButton from '../../../../components/ActionButton';

const ExportReports = ({ month, children, ...rest }) => {
  const exportAction = useExportCallback(month);

  return (
    <ActionButton
      status={exportAction.status}
      onClick={exportAction.execute}
      {...rest}
    >
      {exportAction.loading ? 'Exporting...' : children}
    </ActionButton>
  );
};

const useExportCallback = (month) => useAsyncCallback(async () => {
  const data = await fetchData({ month });

  const worker = new Worker();
  const pdfWorker = Comlink.wrap(worker);
  pdfWorker.onProgress(Comlink.proxy(info => console.log(info));

  const zipBlob = pdfWorker.generateAll(data.patients);
  saveAs(zipBlob, 'Report.zip');
});

export default ExportReports;

If you want to preview the PDF you can use URL.createObjectURL(zipBlob) and use the created url in an iframe

It should be possible to have this implemented in react-pdf/renderer, but in the meantime this can serve anyone who deals with large PDFs that cause UI freezes

[pengw00]

Hello, is it this non-blocking rendering is resolved?