Next.js中使用generateStaticParams时，如何无需'use client'使用useState

问题本质 #

带有generateStaticParams()的页面组件默认是服务端组件，无法使用useState这类客户端专属API；但直接给页面加'use client'指令，又会导致generateStaticParams()失效——因为客户端组件无法运行服务端的静态生成逻辑，两者天然冲突。

解决方案：拆分组件 #

把需要交互状态的部分抽成独立的客户端组件，页面组件保留服务端属性负责静态生成逻辑，通过props传递数据。

1. 保留页面组件作为服务端组件（page.tsx）

负责静态参数生成、服务端数据处理，把图片尺寸等数据传给客户端组件：

// app/[galleryId]/page.tsx
import ImageGalleryClient from './ImageGalleryClient';

// 静态生成参数，仅在服务端运行
export async function generateStaticParams() {
  return [
    { galleryId: 'nature' },
    { galleryId: 'city' },
  ];
}

export default function GalleryPage({ params }: { params: { galleryId: string } }) {
  // 服务端侧获取图片尺寸（示例数据，实际可从数据库/文件系统读取）
  const imageSizes = [
    { width: 800, height: 533 },
    { width: 1200, height: 800 },
  ];

  // 渲染客户端组件并传递props
  return <ImageGalleryClient imageSizes={imageSizes} galleryId={params.galleryId} />;
}

2. 新建客户端组件处理交互逻辑

单独创建带'use client'指令的组件，在这里使用useState等客户端钩子：

// app/[galleryId]/ImageGalleryClient.tsx
'use client';

import { useState } from 'react';

export default function ImageGalleryClient({ 
  imageSizes, 
  galleryId 
}: {
  imageSizes: { width: number; height: number }[],
  galleryId: string
}) {
  const [currentImgIdx, setCurrentImgIdx] = useState(0);

  return (
    <div className="image-gallery">
      <h2>{galleryId.charAt(0).toUpperCase() + galleryId.slice(1)} Gallery</h2>
      <img
        src={`/assets/galleries/${galleryId}/${currentImgIdx}.webp`}
        width={imageSizes[currentImgIdx].width}
        height={imageSizes[currentImgIdx].height}
        alt={`Gallery image ${currentImgIdx + 1}`}
      />
      <button onClick={() => setCurrentImgIdx(prev => (prev + 1) % imageSizes.length)}>
        切换图片
      </button>
    </div>
  );
}

核心逻辑 #

服务端组件负责静态预渲染、数据拉取等服务端专属工作，客户端组件专注于交互状态和前端渲染，通过props完成数据传递，既保留SSG的优势，又满足客户端交互需求。

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