Deno+Fresh项目中i18next按钮切换语言失效问题排查

核心问题 #

Fresh 是 SSR 框架，默认组件在服务器端渲染。按钮切换语言是客户端侧交互，但服务器端渲染的组件不会自动感知客户端的语言变化——直接在 index.tsx 调用 i18n.changeLanguage("es") 是在服务器端执行，能直接修改服务端 i18n 实例并渲染对应内容，但客户端触发的切换无法同步更新已渲染的服务端组件。

具体修复方案 #

1. 将按钮组件标记为客户端组件 #

Fresh 中需要用 use client 标记包含前端交互的组件，确保点击事件在客户端执行，使用正确的客户端 i18n 实例：

// components/ChangeToSpanish.tsx
/** @jsx h */
import { h } from "preact";
import { useTranslation } from "react-i18next";

"use client";

export default function ChangeToSpanish() {
  const { i18n } = useTranslation();

  return (
    <button onClick={() => i18n.changeLanguage("es")}>
      Cambiar a Español
    </button>
  );
}

2. 让标题组件响应语言变化 #

如果标题是服务器端渲染的，需要改为客户端组件并使用 useTranslation 钩子——这个钩子会自动订阅 i18n 的语言变更事件，触发组件重新渲染：

// components/Title.tsx
/** @jsx h */
import { h } from "preact";
import { useTranslation } from "react-i18next";

"use client";

export default function Title() {
  const { t } = useTranslation();
  return <h1>{t("welcome")}</h1>;
}

3. 确认客户端 i18n 初始化正确 #

确保客户端的 i18n 配置能正确加载语言文件，比如你的 i18n.client.ts 应该配置为通过 HTTP 加载 locales：

// i18n.client.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    lng: "en",
    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}.json",
    },
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

并在 _app.tsx 中导入这个文件，保证客户端初始化时加载 i18n：

// _app.tsx
import { AppProps } from "$fresh/server.ts";
import "../i18n.client.ts";

export default function App({ Component }: AppProps) {
  return <Component />;
}

4. 隔离服务端与客户端 i18n 实例 #

服务端可以用文件系统加载 locales，客户端用 HTTP 加载，避免实例冲突，确保两侧的语言配置独立但同步。

验证 #

修改完成后，点击按钮切换语言，标题会自动更新为西班牙语，因为客户端组件会监听语言变化并重新渲染。

内容的提问来源于stack exchange，提问作者Vicens Fayos