NextJS中使用getServerSideProps时，页面数据修改后如何重新填充？

三种方案的合理性判断 #

1. 强制刷新页面 #

合理但体验拉胯。更新后刷新页面确实能通过getServerSideProps拿到最新数据，但会导致页面闪烁、资源重新加载，中断用户操作流程，只适合对交互体验完全没要求的场景。

2. 本地状态同步props #

完全合理，这是SSR场景下处理客户端交互的常规操作。用props初始化本地状态，后续UI基于状态渲染，更新后端后直接修改状态实现即时反馈——既保留了SSR首屏快、SEO友好的优势，又能提供流畅的客户端交互。

你给出的示例代码可以补充完整输入UI，优化后版本如下：

const User = ({ name }) => {
  // 直接用props初始化状态，省去多余的useEffect
  const [localName, setLocalName] = useState(name);
  const [inputValue, setInputValue] = useState(name);

  const saveNewName = async () => {
    try {
      const res = await fetch('/api/user/1', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: inputValue })
      });
      const data = await res.json();
      // 优先用后端返回值更新状态，避免前端输入和后端实际存储值不一致
      setLocalName(data.name);
    } catch (err) {
      console.error('更新失败:', err);
    }
  }

  return (
    <div>
      <p>Hello, {localName}</p>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={saveNewName}>保存</button>
    </div>
  );
}

3. 放弃SSR改用SPA模式 #

合理但浪费了SSR的核心价值。这种方案会让首屏出现空白，直到前端fetch完成才渲染内容，失去了SSR在SEO、首屏性能上的优势，仅适合完全不需要SEO、面向内部的低流量系统。

最优方案 #

方案2是最优选择，原因很直接：

• 保留SSR的核心优势：首屏快速渲染、搜索引擎友好；
• 提供流畅的客户端交互：更新无需刷新页面，即时反馈用户操作；
• 实现成本低，符合React/Next.js的常规开发模式。

其他更佳方案 #

使用SWR/React Query等数据缓存库 #

这类库能自动处理数据同步、缓存和重新验证，进一步简化逻辑。以SWR为例：

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

const User = () => {
  const { data, mutate } = useSWR('/api/user/1', fetcher);

  if (!data) return <div>加载中...</div>;

  const saveNewName = async (newName) => {
    await fetch('/api/user/1', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: newName })
    });
    mutate(); // 触发重新拉取最新数据，自动更新UI
  }

  return (
    <div>
      <p>Hello, {data.name}</p>
      <input
        type="text"
        defaultValue={data.name}
        onChange={(e) => saveNewName(e.target.value)}
      />
    </div>
  );
}

优势在于：

• 自动处理数据缓存和过期重验证；
• 无需手动维护本地状态，代码更简洁；
• 支持自动重试、乐观更新等高级特性，进一步提升交互体验。

乐观更新优化体验 #

在方案2基础上加入乐观更新：更新后端前先修改本地状态，让用户立刻看到变化，后端响应后再确认最终状态（失败则回滚），能大幅提升交互流畅度：

const saveNewName = async () => {
  const prevName = localName;
  setLocalName(inputValue); // 先更新本地状态，给用户即时反馈
  try {
    const res = await fetch('/api/user/1', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: inputValue })
    });
    if (!res.ok) throw new Error('更新失败');
    const data = await res.json();
    setLocalName(data.name);
  } catch (err) {
    console.error('更新失败:', err);
    setLocalName(prevName); // 更新失败回滚状态
    alert('更新失败，请重试');
  }
}

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