Performance Issues with React Email Package on AWS EC2 t4g.micro

[Oigen43]

Hi everyone,

We're encountering a significant performance issue after integrating the React Email package in our Node.js backend, hosted on AWS EC2 t4g.micro.

Setup:
We use Turborepo for our monorepo setup, with a backend built on Node.js and Express.
Package Functionality: We created a transactional package that takes props, runs renderAsync with a React component, and returns the generated HTML. This HTML is then sent using SendGrid.

Issue:
When we import any method from our transactional package built with React Email, the CPU utilization on our AWS EC2 t4g.micro instance spikes dramatically. The server's performance degrades significantly, processing requests slower until it eventually crashes. Notably, the issue arises even if we don't call the imported functions; simply importing the package causes the problem.
Upgrading to a t4g.small instance resolves the issue, and everything functions as expected.

Example of Usage:

1. Package Method

export const getWelcomeCompanyEmail = async ({
  link,
  firstName,
  logoPath,
  locale,
  publicUrl,
  primaryColor,
}: WelcomeCompanyEmailProps) => {
  const subject = __getEmailT('subject', {}, locale).welcomeCompany;

  const emailHtml = await renderAsync(
    WelcomeCompanyEmail({
      link,
      firstName,
      logoPath,
      locale,
      publicUrl,
      primaryColor,
    }) as ReactElement
  );

  return { emailHtml, subject };
};

2. API Usage:

const {
  getWelcomeCompanyEmail,
} = require('transactional');

const sendWelcomeCompanyEmail = async (
  userId,
  email,
  hostname,
  firstName,
  logoPath,
  primaryColor
) => {
  if (!email) {
    return;
  }
  if (process.env.DISABLE_EMAILS === 'true') {
    return;
  }
  // import here to solve a circular dependency issue
  const { getLocale } = require('models/user');

  // if the below fails, the error should NOT bubble up
  // i.e. it should NOT result in an error to be send to the client
  try {
    const locale = await getLocale({ userId });

    const { emailHtml, subject } = await getWelcomeCompanyEmail({
      link: 'dashboard',
      firstName,
      logoPath,
      locale,
      publicUrl: __mapPublicUrl(locale, hostname),
      primaryColor,
    });

    await sgMail.send({
      to: email,
      from: `Ofcorz <${process.env.EMAIL_SOURCE}>`,
      subject,
      html: emailHtml,
    });
  } catch (e) {
    sentry.captureError({
      message: `Error sending welcomeCompany email to ${email} and user ${userId}`,
      data: e,
    });
  }
};

Question
Are there any known minimal requirements for the React Email package, particularly concerning CPU or memory usage? Any insights or advice would be greatly appreciated. Thanks!

[gabrielmfern]

Are you using Tailwind? Generally these sorts of issues are caused by Tailwind as it is not in the most optimal implementation atm. If you are using the @react-email/components package, I recommend you use the packages individually and see if it makes any difference in the CPU usage.

If this isn't Tailwind it would be interesting exploring what exactly causes the issue for you here.