Next.js：客户端组件能否向服务端组件传Props？如何缓存组件数据？

一、带交互的取货时间组件能否用 Server Component 实现？ #

Server Component 无法接收函数类型的 Props——因为它在服务器端渲染，函数无法被序列化传递到客户端。而你的取货时间选择组件需要处理 select 的 onChange 交互逻辑，这部分必须在客户端执行，所以不能完全用 Server Component 实现，但可以通过「Server Component + Client Component」的组合来满足需求：

1. Server Component 负责静态数据获取与传递：用它获取并缓存取货时间列表（这部分是几乎不变的静态数据，适合服务器端处理），然后将可序列化的时间数据传递给 Client Component。
2. Client Component 负责交互逻辑：接收 Server Component 传来的时间数据，渲染 select 并处理选择事件。

示例代码：

Server Component（PickupTimesServer.tsx）

import PickupTimesClient from './PickupTimesClient';

// 获取并缓存取货时间数据
async function getPickupTimes() {
  // 利用 Next.js 默认的 fetch 缓存，适合几乎不变的数据
  const res = await fetch('https://your-api.com/store/pickup-times', {
    cache: 'force-cache',
    next: { revalidate: 86400 } // 24小时自动重新验证一次数据
  });
  return res.json();
}

export default async function PickupTimesServer() {
  const times = await getPickupTimes();
  // 仅传递可序列化的数组给 Client Component
  return <PickupTimesClient times={times} />;
}

Client Component（PickupTimesClient.tsx）

'use client';

import { useState } from 'react';

interface Props {
  times: string[];
}

export default function PickupTimesClient({ times }: Props) {
  const [selectedTime, setSelectedTime] = useState('');

  const handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedTime(e.target.value);
    // 这里处理选择后的业务逻辑，比如提交表单、更新状态等
  };

  return (
    <select value={selectedTime} onChange={handleSelect}>
      <option value="">请选择取货时间</option>
      {times.map(time => (
        <option key={time} value={time}>{time}</option>
      ))}
    </select>
  );
}

二、如何缓存数据让组件达到静态生成的渲染速度？ #

Next.js 13 提供了多种缓存机制，可让依赖静态数据的组件接近静态生成页面的速度：

• Fetch 默认缓存：fetch 请求默认启用 cache: 'force-cache'，数据会被缓存到服务器，后续请求直接读取缓存结果。通过 next.revalidate 可以设置自动刷新缓存的时间（比如示例中的24小时）。
• unstable_cache 自定义缓存：对于非 fetch 的数据获取逻辑，可使用这个 API 手动缓存函数结果：

  import { unstable_cache } from 'next/cache';
  
  const getPickupTimes = unstable_cache(
    async () => {
      // 自定义数据获取逻辑（比如直接查询数据库）
      return await db.query('SELECT * FROM pickup_times');
    },
    ['pickup-times-cache-key'], // 唯一缓存标识
    { revalidate: 86400 } // 缓存有效期
  );
  

• 增量静态再生（ISR）：如果你的页面是静态生成类型，可结合 ISR 让页面在构建时生成静态内容，之后每隔指定时间自动重新生成，兼顾静态页面的速度和数据的新鲜度。
• 静态生成（SSG）：如果数据完全不会变更，可在构建时通过 getStaticProps（Next.js 13 中也可直接在组件内异步获取）预生成页面，所有请求直接返回静态 HTML，速度最快。

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