Next.js 13如何结合服务端与客户端组件实现多语言标签预渲染？

核心思路是把服务端数据获取、Locale 匹配逻辑放在服务端完成，再将处理好的最终字段传递给客户端组件，既满足服务端处理的需求，又不影响客户端组件的 useState 等交互逻辑。以下是几种实用实现方式：

方案1：组件拆分（Next.js App Router 推荐） #

将页面拆分为「服务端组件」和「客户端组件」：服务端组件负责数据获取与Locale处理，客户端组件只负责渲染和交互逻辑。

服务端组件（负责数据处理） #

// app/[locale]/page.js
import ClientUserComponent from './ClientUserComponent';

// 服务端获取多语言字段
async function fetchLocaleLabels() {
  const res = await fetch('你的服务端接口地址', { cache: 'no-store' });
  return res.json(); // 假设返回结构：{ usernameEn: "Username", usernameFr: "Nom d'utilisateur" }
}

export default async function UserPage({ params: { locale } }) {
  const labels = await fetchLocaleLabels();
  // 服务端完成Locale匹配，直接得到最终标签
  const usernameLabel = locale === 'en' ? labels.usernameEn : labels.usernameFr;

  // 将处理好的标签传给客户端组件
  return <ClientUserComponent usernameLabel={usernameLabel} />;
}

客户端组件（负责渲染与交互） #

// app/[locale]/ClientUserComponent.js
'use client';
import { useState } from 'react';

export default function ClientUserComponent({ usernameLabel }) {
  const [user, setUser] = useState({});

  return (
    <div>
      <label>{usernameLabel}</label>
      {/* 其他需要useState的交互逻辑 */}
    </div>
  );
}

方案2：Pages Router 用 getServerSideProps 传递数据 #

如果使用 Next.js Pages Router，可以通过 getServerSideProps 在服务端完成数据处理，直接将最终字段传给页面组件：

// pages/[locale]/user.js
import { useState } from 'react';

// 服务端获取并处理数据
export async function getServerSideProps(context) {
  const { locale } = context.params;
  const res = await fetch('你的服务端接口地址');
  const labels = await res.json();
  const usernameLabel = locale === 'en' ? labels.usernameEn : labels.usernameFr;

  return {
    props: { usernameLabel } // 将处理好的标签传给页面组件
  };
}

export default function UserPage({ usernameLabel }) {
  const [user, setUser] = useState({});

  return (
    <div>
      <label>{usernameLabel}</label>
    </div>
  );
}

方案3：客户端组件内预加载（不推荐，会有加载态） #

如果无法拆分组件，可在客户端组件内用 useEffect 提前获取数据，但会出现短暂加载态，且存在 hydration 不匹配风险：

'use client';
import { useState, useEffect } from 'react';

export default function UserComponent({ locale }) {
  const [user, setUser] = useState({});
  const [usernameLabel, setUsernameLabel] = useState(null);

  useEffect(() => {
    async function fetchAndProcessLabels() {
      const res = await fetch('你的服务端接口地址');
      const labels = await res.json();
      setUsernameLabel(locale === 'en' ? labels.usernameEn : labels.usernameFr);
    }
    fetchAndProcessLabels();
  }, [locale]);

  // 加载状态
  if (!usernameLabel) return <div>Loading...</div>;

  return (
    <div>
      <label>{usernameLabel}</label>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者U Ang