Next.js 13客户端表单Select组件：服务端还是客户端取数？

针对你的场景，两种方案各有优劣，核心可以围绕数据更新频率、代码复用性和用户体验来选择，同时你担心的服务端重复请求问题其实可以通过Next.js的缓存机制解决：

一、服务端获取后传参（推荐用于静态/低频更新数据） #

优势 #

• 用户体验更好：数据在页面渲染前就已获取，Select组件不会出现加载等待状态，直接展示选项。
• 避免重复请求：Next.js的fetch默认开启缓存，只要两个页面请求的是同一个接口，实际只会向数据库发起一次请求，后续请求直接读取缓存。你可以通过next.revalidate配置缓存有效期，比如设置为86400（一天），完全不用担心重复请求的问题。
• 代码复用：可以把数据获取逻辑封装成公共函数，在/new和/edit页面中复用。

实现示例 #

1. 封装公共数据获取函数（比如lib/data.js）：

export async function getSelectOptions() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/select-options`, {
    next: { revalidate: 86400 } // 缓存1天，按需调整
  });
  if (!res.ok) throw new Error('获取选项数据失败');
  return res.json();
}

2. 在/new/page.js（服务端组件）中调用：

import Form from '@/components/Form';
import { getSelectOptions } from '@/lib/data';

async function NewPage() {
  const options = await getSelectOptions();
  return <Form options={options} />;
}

export default NewPage;

3. /edit/page.js同理，直接复用getSelectOptions即可，缓存会自动生效。

二、客户端直接获取（适合高频更新/需要动态刷新的数据） #

优势 #

• 逻辑复用性更强：把数据获取逻辑封装在自定义Hook或Select组件内部，/new和/edit的表单无需额外传参，直接使用组件即可。
• 动态刷新灵活：如果选项数据需要根据客户端操作（比如用户切换权限）实时更新，客户端获取更容易实现。

实现示例 #

封装自定义Hook（比如hooks/useSelectOptions.js）：

import { useState, useEffect } from 'react';

export function useSelectOptions() {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchOptions() {
      try {
        const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/select-options`);
        const data = await res.json();
        setOptions(data);
      } catch (err) {
        console.error('获取选项失败:', err);
      } finally {
        setLoading(false);
      }
    }
    fetchOptions();
  }, []);

  return { options, loading };
}

在Select组件中使用：

import { useSelectOptions } from '@/hooks/useSelectOptions';

function SelectComponent() {
  const { options, loading } = useSelectOptions();

  if (loading) return <div>加载中...</div>;
  
  return (
    <select>
      {options.map(opt => (
        <option key={opt.id} value={opt.value}>{opt.label}</option>
      ))}
    </select>
  );
}

之后/new和/edit的表单直接引入SelectComponent即可，无需额外处理数据。

三、方案选择建议 #

• 如果是静态枚举类数据（比如用户角色、商品分类），优先选服务端获取+缓存，体验和性能最优，且不存在重复请求的问题。
• 如果是高频更新数据（比如实时库存状态、动态权限选项），选客户端获取更灵活，同时通过自定义Hook保证逻辑复用。

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