Next.js 13能否像v12一样预渲染客户端组件为静态页面？

核心结论 #

在Next.js 13的App Router模式下，标记use client的组件本身无法直接在构建阶段生成包含API请求结果的静态HTML——因为客户端组件的渲染逻辑仅在浏览器端执行。要实现Pages Router中getStaticProps的静态生成效果，必须依托服务器组件完成数据预取，再将数据传递给客户端组件渲染。

可行实现方案 #

1. 服务器组件预取数据+客户端组件接收Props #

这是官方推荐的标准路径，具体操作：

• 在无use client标记的服务器组件中，使用fetch请求数据（默认cache: 'force-cache'，确保构建时缓存数据）
• 将获取到的数据作为props传递给客户端组件
• 客户端组件仅负责接收数据并渲染UI，不处理数据请求逻辑

示例代码：

// app/page.tsx（服务器组件）
async function Page() {
  // 构建阶段执行请求，数据被缓存为静态资源
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // 传递数据给客户端组件
  return <ClientComponent data={data} />;
}

export default Page;

// app/components/ClientComponent.tsx（客户端组件）
'use client';

export default function ClientComponent({ data }) {
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

2. 按需重新验证配置 #

如果需要实现类似getStaticProps的revalidate静态页面更新机制，可通过两种方式配置：

• 在服务器组件的fetch请求中添加next: { revalidate: 60 }（单位：秒）
• 在页面组件中导出revalidate全局变量

示例：

// app/page.tsx
// 全局配置：每60秒重新生成静态页面
export const revalidate = 60;

async function Page() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return <ClientComponent data={data} />;
}

常见误区澄清 #

• 客户端组件内发起的API请求仅在浏览器端执行，构建阶段不会触发，因此无法生成包含请求结果的静态HTML
• 服务器组件的限制（如不能使用浏览器API）可通过拆分逻辑规避：核心数据预取放在服务器组件，交互逻辑（如点击事件、状态管理）放在客户端组件

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