fix(react-email): Unwanted email re-renders when switching templates (#1846)

Author: gabrielmfern

.changeset/purple-feet-share.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Fix emails being re-rendered each time there is navigation in the preview server

packages/react-email/src/actions/get-email-path-from-slug.ts

@@ -1,10 +1,11 @@
 'use server';
 import path from 'node:path';
 import fs from 'node:fs';
+import { cache } from 'react';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 
 // eslint-disable-next-line @typescript-eslint/require-await
-export const getEmailPathFromSlug = async (slug: string) => {
+export const getEmailPathFromSlug = cache(async (slug: string) => {
   if (['.tsx', '.jsx', '.ts', '.js'].includes(path.extname(slug)))
     return path.join(emailsDirectoryAbsolutePath, slug);
 
@@ -25,4 +26,4 @@ export const getEmailPathFromSlug = async (slug: string) => {
 
     This is most likely not an issue with the preview server. It most likely is that the email doesn't exist.`,
   );
-};
+});

packages/react-email/src/actions/get-emails-directory-metadata.ts

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import fs from 'node:fs';
 import path from 'node:path';
+import { cache } from 'react';
 
 const isFileAnEmail = (fullPath: string): boolean => {
   const stat = fs.statSync(fullPath);
@@ -57,64 +58,66 @@ const mergeDirectoriesWithSubDirectories = (
   return currentResultingMergedDirectory;
 };
 
-export const getEmailsDirectoryMetadata = async (
-  absolutePathToEmailsDirectory: string,
-  keepFileExtensions = false,
-  isSubDirectory = false,
-
-  baseDirectoryPath = absolutePathToEmailsDirectory,
-): Promise<EmailsDirectory | undefined> => {
-  if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
-
-  const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, {
-    withFileTypes: true,
-  });
-
-  const emailFilenames = dirents
-    .filter((dirent) =>
-      isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name)),
-    )
-    .map((dirent) =>
-      keepFileExtensions
-        ? dirent.name
-        : dirent.name.replace(path.extname(dirent.name), ''),
-    );
+export const getEmailsDirectoryMetadata = cache(
+  async (
+    absolutePathToEmailsDirectory: string,
+    keepFileExtensions = false,
+    isSubDirectory = false,
+
+    baseDirectoryPath = absolutePathToEmailsDirectory,
+  ): Promise<EmailsDirectory | undefined> => {
+    if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
 
-  const subDirectories = await Promise.all(
-    dirents
-      .filter(
-        (dirent) =>
-          dirent.isDirectory() &&
-          !dirent.name.startsWith('_') &&
-          dirent.name !== 'static',
+    const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, {
+      withFileTypes: true,
+    });
+
+    const emailFilenames = dirents
+      .filter((dirent) =>
+        isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name)),
       )
-      .map((dirent) => {
-        const direntAbsolutePath = path.join(
-          absolutePathToEmailsDirectory,
-          dirent.name,
-        );
-
-        return getEmailsDirectoryMetadata(
-          direntAbsolutePath,
-          keepFileExtensions,
-          true,
-          baseDirectoryPath,
-        ) as Promise<EmailsDirectory>;
-      }),
-  );
-
-  const emailsMetadata = {
-    absolutePath: absolutePathToEmailsDirectory,
-    relativePath: path.relative(
-      baseDirectoryPath,
-      absolutePathToEmailsDirectory,
-    ),
-    directoryName: absolutePathToEmailsDirectory.split(path.sep).pop()!,
-    emailFilenames,
-    subDirectories,
-  } satisfies EmailsDirectory;
-
-  return isSubDirectory
-    ? mergeDirectoriesWithSubDirectories(emailsMetadata)
-    : emailsMetadata;
-};
+      .map((dirent) =>
+        keepFileExtensions
+          ? dirent.name
+          : dirent.name.replace(path.extname(dirent.name), ''),
+      );
+
+    const subDirectories = await Promise.all(
+      dirents
+        .filter(
+          (dirent) =>
+            dirent.isDirectory() &&
+            !dirent.name.startsWith('_') &&
+            dirent.name !== 'static',
+        )
+        .map((dirent) => {
+          const direntAbsolutePath = path.join(
+            absolutePathToEmailsDirectory,
+            dirent.name,
+          );
+
+          return getEmailsDirectoryMetadata(
+            direntAbsolutePath,
+            keepFileExtensions,
+            true,
+            baseDirectoryPath,
+          ) as Promise<EmailsDirectory>;
+        }),
+    );
+
+    const emailsMetadata = {
+      absolutePath: absolutePathToEmailsDirectory,
+      relativePath: path.relative(
+        baseDirectoryPath,
+        absolutePathToEmailsDirectory,
+      ),
+      directoryName: absolutePathToEmailsDirectory.split(path.sep).pop()!,
+      emailFilenames,
+      subDirectories,
+    } satisfies EmailsDirectory;
+
+    return isSubDirectory
+      ? mergeDirectoriesWithSubDirectories(emailsMetadata)
+      : emailsMetadata;
+  },
+);

packages/react-email/src/actions/render-email-by-path.tsx

@@ -21,9 +21,16 @@ export type EmailRenderingResult =
       error: ErrorObject;
     };
 
+const cache = new Map<string, EmailRenderingResult>();
+
 export const renderEmailByPath = async (
   emailPath: string,
+  invalidatingCache = false,
 ): Promise<EmailRenderingResult> => {
+  if (invalidatingCache) cache.delete(emailPath);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (cache.has(emailPath)) return cache.get(emailPath)!;
+
   const timeBeforeEmailRendered = performance.now();
 
   const emailFilename = path.basename(emailPath);
@@ -36,22 +43,22 @@ export const renderEmailByPath = async (
     registerSpinnerAutostopping(spinner);
   }
 
-  const result = await getEmailComponent(emailPath);
+  const componentResult = await getEmailComponent(emailPath);
 
-  if ('error' in result) {
+  if ('error' in componentResult) {
     spinner?.stopAndPersist({
       symbol: logSymbols.error,
       text: `Failed while rendering ${emailFilename}`,
     });
-    return { error: result.error };
+    return { error: componentResult.error };
   }
 
   const {
     emailComponent: Email,
     createElement,
     render,
     sourceMapToOriginalFile,
-  } = result;
+  } = componentResult;
 
   const previewProps = Email.PreviewProps || {};
   const EmailComponent = Email as React.FC;
@@ -82,14 +89,18 @@ export const renderEmailByPath = async (
       text: `Successfully rendered ${emailFilename} in ${timeForConsole}`,
     });
 
-    return {
+    const renderingResult = {
       // This ensures that no null byte character ends up in the rendered
       // markup making users suspect of any issues. These null byte characters
       // only seem to happen with React 18, as it has no similar incident with React 19.
       markup: markup.replaceAll('\0', ''),
       plainText,
       reactMarkup,
     };
+
+    cache.set(emailPath, renderingResult);
+
+    return renderingResult;
   } catch (exception) {
     const error = exception as Error;
 

packages/react-email/src/app/preview/[...slug]/page.tsx

@@ -48,14 +48,14 @@ This is most likely not an issue with the preview server. Maybe there was a typo
     throw exception;
   }
 
-  const emailRenderingResult = await renderEmailByPath(emailPath);
+  const serverEmailRenderingResult = await renderEmailByPath(emailPath);
 
   if (
-    'error' in emailRenderingResult &&
-    process.env.NEXT_PUBLIC_IS_BUILDING === 'true'
+    process.env.NEXT_PUBLIC_IS_BUILDING === 'true' &&
+    'error' in serverEmailRenderingResult
   ) {
-    throw new Error(emailRenderingResult.error.message, {
-      cause: emailRenderingResult.error,
+    throw new Error(serverEmailRenderingResult.error.message, {
+      cause: serverEmailRenderingResult.error,
     });
   }
 
@@ -67,7 +67,7 @@ This is most likely not an issue with the preview server. Maybe there was a typo
       <Preview
         emailPath={emailPath}
         pathSeparator={path.sep}
-        renderingResult={emailRenderingResult}
+        serverRenderingResult={serverEmailRenderingResult}
         slug={slug}
       />
     </Suspense>

packages/react-email/src/app/preview/[...slug]/preview.tsx

@@ -8,40 +8,39 @@ import type { EmailRenderingResult } from '../../../actions/render-email-by-path
 import { CodeContainer } from '../../../components/code-container';
 import { Shell } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
-import { useEmails } from '../../../contexts/emails';
 import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
+import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
 import { RenderingError } from './rendering-error';
 
 interface PreviewProps {
   slug: string;
   emailPath: string;
   pathSeparator: string;
-  renderingResult: EmailRenderingResult;
+  serverRenderingResult: EmailRenderingResult;
 }
 
 const Preview = ({
   slug,
   emailPath,
   pathSeparator,
-  renderingResult: initialRenderingResult,
+  serverRenderingResult,
 }: PreviewProps) => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
   const activeView = searchParams.get('view') ?? 'desktop';
   const activeLang = searchParams.get('lang') ?? 'jsx';
-  const { useEmailRenderingResult } = useEmails();
 
   const renderingResult = useEmailRenderingResult(
     emailPath,
-    initialRenderingResult,
+    serverRenderingResult,
   );
 
   const renderedEmailMetadata = useRenderingMetadata(
     emailPath,
     renderingResult,
-    initialRenderingResult,
+    serverRenderingResult,
   );
 
   if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
@@ -90,7 +89,6 @@ const Preview = ({
           <RenderingError error={renderingResult.error} />
         ) : null}
 
-        {/* If this is undefined means that the initial server render of the email had errors */}
         {hasNoErrors ? (
           <>
             {activeView === 'desktop' && (
@@ -135,6 +133,7 @@ const Preview = ({
             )}
           </>
         ) : null}
+
         <Toaster />
       </div>
     </Shell>