Iurii Compares: Puppeteer vs react-pdf: Node.js PDF Generation Compared (2026)

// lib/pdf/generate-invoice-puppeteer.ts
import puppeteer, { Browser } from "puppeteer";
 
// Reuse a single browser instance across requests — launching Chromium
// for every PDF is 1–2 seconds of overhead you don't want.
let browserInstance: Browser | null = null;
 
async function getBrowser(): Promise<Browser> {
  if (!browserInstance || !browserInstance.connected) {
    browserInstance = await puppeteer.launch({
      headless: true,
      args: [
        "--no-sandbox",
        "--disable-setuid-sandbox",
        "--disable-dev-shm-usage", // Required in Docker/Linux — /dev/shm is small
      ],
    });
  }
  return browserInstance;
}
 
export async function generateInvoicePDF(htmlContent: string): Promise<Buffer> {
  const browser = await getBrowser();
  const page = await browser.newPage();
 
  try {
    // setContent is faster than page.goto() for generated HTML
    await page.setContent(htmlContent, { waitUntil: "networkidle0" });
 
    const pdf = await page.pdf({
      format: "A4",
      printBackground: true, // Include background colors and images
      margin: { top: "20mm", right: "15mm", bottom: "20mm", left: "15mm" },
    });
 
    return Buffer.from(pdf);
  } finally {
    // Close the page but keep the browser running — pages are cheap, browsers are not
    await page.close();
  }
}

// lib/pdf/puppeteer-serverless.ts
import chromium from "@sparticuz/chromium";
import puppeteer from "puppeteer-core"; // Note: puppeteer-core, not puppeteer
 
export async function generatePDFServerless(htmlContent: string): Promise<Buffer> {
  // chromium.executablePath() downloads and extracts the binary on first call.
  // Cache-control is handled internally; subsequent calls reuse the cached binary.
  const executablePath = await chromium.executablePath();
 
  const browser = await puppeteer.launch({
    args: chromium.args,
    defaultViewport: chromium.defaultViewport,
    executablePath,
    headless: chromium.headless,
  });
 
  const page = await browser.newPage();
 
  try {
    await page.setContent(htmlContent, { waitUntil: "networkidle0" });
    const pdf = await page.pdf({ format: "A4", printBackground: true });
    return Buffer.from(pdf);
  } finally {
    await page.close();
    await browser.close(); // On serverless, close the browser — no persistent instance
  }
}

// lib/pdf/fonts.ts
import { Font } from "@react-pdf/renderer";
 
// Register once at module load — @react-pdf caches registered fonts.
// Call this before any PDF rendering that needs Cyrillic.
export function registerFonts(): void {
  Font.register({
    family: "Roboto",
    fonts: [
      {
        src: "/fonts/Roboto-Regular.ttf",
        fontWeight: "normal",
      },
      {
        src: "/fonts/Roboto-Bold.ttf",
        fontWeight: "bold",
      },
      {
        src: "/fonts/Roboto-Italic.ttf",
        fontWeight: "normal",
        fontStyle: "italic",
      },
    ],
  });
}

// components/pdf/Invoice.tsx
import React from "react";
import {
  Document,
  Page,
  Text,
  View,
  StyleSheet,
} from "@react-pdf/renderer";
import { registerFonts } from "@/lib/pdf/fonts";
 
registerFonts();
 
interface LineItem {
  description: string;
  quantity: number;
  unitPrice: number; // in cents
  vatRate: number; // e.g. 0.22 for 22%
}
 
interface InvoiceProps {
  invoiceNumber: string;
  issuedAt: Date;
  dueAt: Date;
  seller: {
    name: string;
    address: string;
    vatNumber: string;
  };
  buyer: {
    name: string;
    address: string;
    vatNumber?: string; // Optional — B2C buyers don't have one
  };
  lineItems: LineItem[];
  currency: string;
  locale: string; // "en", "ru", "uk", "et"
  reverseCharge?: boolean; // B2B cross-border: buyer accounts for VAT
}
 
const styles = StyleSheet.create({
  page: {
    fontFamily: "Roboto", // Required for Cyrillic support
    fontSize: 10,
    padding: 40,
    color: "#1a1a1a",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 32,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 4,
  },
  section: {
    marginBottom: 20,
  },
  label: {
    fontSize: 8,
    color: "#666",
    marginBottom: 2,
    textTransform: "uppercase",
  },
  value: {
    fontSize: 10,
  },
  tableHeader: {
    flexDirection: "row",
    backgroundColor: "#f5f5f5",
    paddingVertical: 6,
    paddingHorizontal: 8,
    borderBottomWidth: 1,
    borderBottomColor: "#e0e0e0",
    fontWeight: "bold",
  },
  tableRow: {
    flexDirection: "row",
    paddingVertical: 6,
    paddingHorizontal: 8,
    borderBottomWidth: 1,
    borderBottomColor: "#f0f0f0",
  },
  col: {
    flex: 1,
  },
  colNarrow: {
    width: 60,
    textAlign: "right",
  },
  colWide: {
    flex: 3,
  },
  totalsContainer: {
    alignItems: "flex-end",
    marginTop: 16,
  },
  totalRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: 220,
    paddingVertical: 3,
  },
  totalRowBold: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: 220,
    paddingVertical: 5,
    borderTopWidth: 1,
    borderTopColor: "#1a1a1a",
    marginTop: 4,
    fontWeight: "bold",
  },
  reverseChargeNote: {
    marginTop: 24,
    padding: 10,
    backgroundColor: "#f9f9f9",
    borderLeftWidth: 3,
    borderLeftColor: "#ccc",
    fontSize: 9,
    color: "#555",
  },
});
 
const REVERSE_CHARGE_NOTES: Record<string, string> = {
  en: "VAT reverse charge applies. The recipient is liable for the VAT amount under Article 196 of Council Directive 2006/112/EC.",
  ru: "Применяется механизм обратного начисления НДС. Получатель несёт ответственность за уплату НДС согласно статье 196 Директивы Совета 2006/112/EC.",
  uk: "Застосовується механізм зворотного нарахування ПДВ. Одержувач несе відповідальність за сплату ПДВ згідно зі статтею 196 Директиви Ради 2006/112/ЄС.",
  et: "Kohaldatakse käibemaksu pöördmaksustamise mehhanismi. Saaja vastutab käibemaksu tasumise eest vastavalt nõukogu direktiivi 2006/112/EÜ artiklile 196.",
};
 
function formatMoney(cents: number, currency: string, locale: string): string {
  return new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currency.toUpperCase(),
  }).format(cents / 100);
}
 
function formatDate(date: Date, locale: string): string {
  return new Intl.DateTimeFormat(locale, {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date);
}
 
export function Invoice({
  invoiceNumber,
  issuedAt,
  dueAt,
  seller,
  buyer,
  lineItems,
  currency,
  locale,
  reverseCharge = false,
}: InvoiceProps): React.ReactElement {
  const subtotal = lineItems.reduce(
    (sum, item) => sum + item.unitPrice * item.quantity,
    0
  );
 
  // Group VAT by rate to display breakdown (e.g. 22% VAT: €X, 9% VAT: €Y)
  const vatByRate = lineItems.reduce<Record<number, number>>((acc, item) => {
    const vatAmount = item.unitPrice * item.quantity * item.vatRate;
    acc[item.vatRate] = (acc[item.vatRate] ?? 0) + vatAmount;
    return acc;
  }, {});
 
  const totalVat = Object.values(vatByRate).reduce((sum, v) => sum + v, 0);
  const total = subtotal + (reverseCharge ? 0 : totalVat);
 
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        {/* Header */}
        <View style={styles.header}>
          <View>
            <Text style={styles.title}>Invoice</Text>
            <Text style={styles.value}>{invoiceNumber}</Text>
          </View>
          <View style={{ alignItems: "flex-end" }}>
            <Text style={styles.label}>Issued</Text>
            <Text style={styles.value}>{formatDate(issuedAt, locale)}</Text>
            <Text style={[styles.label, { marginTop: 8 }]}>Due</Text>
            <Text style={styles.value}>{formatDate(dueAt, locale)}</Text>
          </View>
        </View>
 
        {/* Seller / Buyer */}
        <View style={{ flexDirection: "row", marginBottom: 24 }}>
          <View style={[styles.section, { flex: 1 }]}>
            <Text style={styles.label}>From</Text>
            <Text style={[styles.value, { fontWeight: "bold" }]}>
              {seller.name}
            </Text>
            <Text style={styles.value}>{seller.address}</Text>
            <Text style={styles.value}>VAT: {seller.vatNumber}</Text>
          </View>
          <View style={[styles.section, { flex: 1 }]}>
            <Text style={styles.label}>Bill To</Text>
            <Text style={[styles.value, { fontWeight: "bold" }]}>
              {buyer.name}
            </Text>
            <Text style={styles.value}>{buyer.address}</Text>
            {buyer.vatNumber && (
              <Text style={styles.value}>VAT: {buyer.vatNumber}</Text>
            )}
          </View>
        </View>
 
        {/* Line Items Table */}
        <View style={styles.tableHeader}>
          <Text style={styles.colWide}>Description</Text>
          <Text style={styles.colNarrow}>Qty</Text>
          <Text style={styles.colNarrow}>Unit Price</Text>
          <Text style={styles.colNarrow}>VAT %</Text>
          <Text style={styles.colNarrow}>Total</Text>
        </View>
 
        {lineItems.map((item, index) => (
          <View key={index} style={styles.tableRow}>
            <Text style={styles.colWide}>{item.description}</Text>
            <Text style={styles.colNarrow}>{item.quantity}</Text>
            <Text style={styles.colNarrow}>
              {formatMoney(item.unitPrice, currency, locale)}
            </Text>
            <Text style={styles.colNarrow}>
              {(item.vatRate * 100).toFixed(0)}%
            </Text>
            <Text style={styles.colNarrow}>
              {formatMoney(item.unitPrice * item.quantity, currency, locale)}
            </Text>
          </View>
        ))}
 
        {/* Totals */}
        <View style={styles.totalsContainer}>
          <View style={styles.totalRow}>
            <Text>Subtotal</Text>
            <Text>{formatMoney(subtotal, currency, locale)}</Text>
          </View>
 
          {/* VAT breakdown per rate */}
          {!reverseCharge &&
            Object.entries(vatByRate).map(([rate, amount]) => (
              <View key={rate} style={styles.totalRow}>
                <Text>VAT {(Number(rate) * 100).toFixed(0)}%</Text>
                <Text>{formatMoney(amount, currency, locale)}</Text>
              </View>
            ))}
 
          {reverseCharge && (
            <View style={styles.totalRow}>
              <Text>VAT</Text>
              <Text>Reverse charge</Text>
            </View>
          )}
 
          <View style={styles.totalRowBold}>
            <Text>Total</Text>
            <Text>{formatMoney(total, currency, locale)}</Text>
          </View>
        </View>
 
        {/* Reverse charge legal note in the customer's language */}
        {reverseCharge && (
          <View style={styles.reverseChargeNote}>
            <Text>
              {REVERSE_CHARGE_NOTES[locale] ?? REVERSE_CHARGE_NOTES["en"]}
            </Text>
          </View>
        )}
      </Page>
    </Document>
  );
}

// app/api/invoices/[id]/route.ts
import { renderToBuffer } from "@react-pdf/renderer";
import { Invoice } from "@/components/pdf/Invoice";
import { db } from "@/packages/db";
import { invoices } from "@/packages/db/schema";
import { eq } from "drizzle-orm";
import React from "react";
 
export async function GET(
  _request: Request,
  { params }: { params: Promise<{ id: string }> }
): Promise<Response> {
  const { id } = await params;
  const invoice = await db
    .select()
    .from(invoices)
    .where(eq(invoices.id, id))
    .limit(1)
    .then((rows) => rows[0]);
 
  if (!invoice) {
    return new Response("Invoice not found", { status: 404 });
  }
 
  // renderToBuffer is synchronous under the hood — it doesn't stream.
  // For large documents, consider renderToStream() if you need early flush.
  const pdfBuffer = await renderToBuffer(
    React.createElement(Invoice, {
      invoiceNumber: invoice.number,
      issuedAt: invoice.issuedAt,
      dueAt: invoice.dueAt,
      seller: invoice.seller,
      buyer: invoice.buyer,
      lineItems: invoice.lineItems,
      currency: invoice.currency,
      locale: invoice.locale,
      reverseCharge: invoice.reverseCharge,
    })
  );
 
  return new Response(pdfBuffer, {
    headers: {
      "Content-Type": "application/pdf",
      "Content-Disposition": `attachment; filename="invoice-${invoice.number}.pdf"`,
      "Content-Length": pdfBuffer.byteLength.toString(),
    },
  });
}