Next.js中如何使用getStaticProps实现条件性数据获取？

getStaticProps 是 Next.js 用于静态生成的服务端方法，仅在应用构建阶段运行，完全无法获取到用户在浏览器端输入的实时状态，因此不可能直接用它实现基于用户输入的条件触发请求逻辑，你的需求场景下不需要强行改用 getStaticProps。

你当前基于 useState + useEffect 的实现思路是完全适配该场景的，只需做几处修正和优化即可：

• 修正状态初始值：你的代码中 keys 初始值设为了数字0，数字不存在length属性，会导致初始判断逻辑异常，建议将初始值改为空字符串 const [keys, setKeys] = useState('');
• 增加防抖逻辑，避免用户连续输入时频繁发起无效请求
• 对请求参数做转义处理，避免用户输入特殊字符导致请求异常

优化后代码示例：

import { useState, useEffect } from 'react';

// 防抖函数，可调整延迟时长
const debounce = (func, delay = 300) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
};

export default function SearchComponent() {
  const [keys, setKeys] = useState('');
  const [options, setOptions] = useState([]);

  useEffect(() => {
    if (keys.length < 2) {
      setOptions([]);
      return;
    }

    const fetchCountries = debounce(async () => {
      try {
        const response = await fetch(
          `https://apiexample.com/country?name=${encodeURIComponent(keys)}`
        );
        const data = await response.json();
        setOptions(data.countries || []);
      } catch (err) {
        setOptions([]);
      }
    });

    fetchCountries();
    return () => setOptions([]);
  }, [keys]);

  // 输入框、选项列表渲染逻辑省略
}

如果有隐藏第三方接口地址、避免跨域的需求，可以配合 Next.js 的 API 路由实现服务端转发，客户端还是保留现有触发逻辑：

1. 新建 pages/api/country.js 文件，写入转发逻辑：

export default async function handler(req, res) {
  const { name } = req.query;
  if (!name || name.length < 2) return res.status(400).json({ countries: [] });
  const response = await fetch(
    `https://apiexample.com/country?name=${encodeURIComponent(name)}`
  );
  const data = await response.json();
  res.status(200).json(data);
}

2. 客户端请求地址替换为 /api/country?name=${keys} 即可，既保留条件触发能力，也不会暴露上游接口信息。

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