如何使用 remix-i18next 对翻译进行 SSR

Question

我有一个混音项目，我想在服务器端呈现所有翻译。我正在使用 remix-i18next。但是，使用下面的代码，翻译最初不会显示，它首先显示所有键，然后加载翻译：

import { useTranslation } from "react-i18next";

export default function A() {
  let { t } = useTranslation("a");
  return <h1>{t("greeting")}</h1>;
}

我知道我可以做到以下几点：

import { useLoaderData } from "@remix-run/react";

import i18next from "~/i18next.server";

export async function loader({ request }) {
  const t = await i18next.getFixedT(request, "a");
  return t("greeting");
}

export default function A() {
  const greeting = useLoaderData();
  return <h1>{greeting}</h1>;
}

但是，我不想使用加载器从那里加载所有翻译，因为它引入了很多样板文件，而且您不能使用 Trans 组件之类的东西。我想知道是否有其他选择。