由 React 生成的 HTML 電子郵件在 GMail web 客戶端中斷

Question

我需要在服務器端生成一個時事通訊電子郵件。 我研究了各種選項，但我選擇了 React（服務器端渲染），因為良好的 TypeScript 支持和我對該技術的熟悉。

生成在 GMail（或任何其他流行客戶端）中正確顯示的電子郵件是一個非常棘手的主題，因為需要使用小型（和舊版）HTML 子集。 但這是一個單獨的問題。

因此，我使用 GMail 支持的 HTML 的子集，使用 React SSR 制作了一個測試電子郵件。 可以肯定的是，我已經使用W3 Validator對其進行了驗證，並且已成功檢查。

But when I sent the generated HTML output to a GMail address and displayed it in the GMail desktop web application, the output was a mess. 在瀏覽器中顯示的郵件 HTML 中，一些元素缺少內聯 CSS 屬性，而其他元素則在其原始父項之外。

如何使用不會在 GMail web 應用程序中中斷的 React 生成電子郵件？

Answer 1

React renderToString function（可能還有類似的）發出一個單行縮小的 HTML output 沒有任何行長度限制。

由於我無法推理的原因，這樣的單行 HTML 文檔可以“破壞” GMail HTML 解析器並導致故障 Z148E6221F39393

但是，另一方面，在線資源實際上推薦電子郵件 HTML 縮小，因為（據報道）空格在電子郵件客戶端之間的解釋可能不一致。 所以漂亮的打印 HTML output 聽起來不是一個好主意。

一種解決方案是重新縮小 HTML 文檔，但有行長限制。 為了安全起見，我把限制設置得很低。 我使用了一個流行的html-minifier package。

import * as React from "react";
import { minify } from "html-minifier";
import { renderToString } from "react-dom/server";

export const renderMyMail = (params: MyMailParams): string => {
  const reactHtmlString = renderToString(MyMail({ params }));
  const reminifiedHtmlString = minify(reactHtmlString, { maxLineLength: 255, keepClosingSlash: true });
  return reminifiedHtmlString;
};

現在，電子郵件在 GMail web 應用程序中正確顯示。