使用getServerSideProps后，组件挂载时是否需用客户端获取数据？

核心结论：绝大多数场景下，用getServerSideProps预渲染后没必要重复在客户端拉取相同数据——毕竟SSR已经在请求阶段把数据拿到并注入组件props了，直接用这些props渲染就好，重复请求纯属浪费资源。

但也不是绝对的，得看具体需求：

不需要客户端二次请求的场景 #

• 数据只需要初始渲染的内容，后续不需要动态更新（比如静态文章页、商品详情页）
• 数据的实时性要求不高，且每次SSR请求都能拿到当前最新状态（比如用户个人信息、非实时统计数据）

这种情况直接用getServerSideProps返回的props渲染即可，完全不用在组件里再写useEffect去fetch相同接口。

需要客户端二次请求的场景 #

如果遇到以下情况，客户端再发请求是合理的：

• 实时数据更新需求：比如仪表盘的实时监控数据、聊天消息列表——SSR只能拿到页面请求时刻的数据，后续要获取最新内容就得客户端主动轮询、用SSE或者WebSocket
• 依赖客户端交互的动态数据：比如用户在页面上选择筛选条件、切换分页，需要根据用户操作重新拉取对应数据——SSR返回的是初始默认数据，交互后的新数据只能客户端请求
• 懒加载非核心数据：比如长列表的后续分页数据、非首屏的详情内容——SSR只返回首屏核心数据，剩下的等用户滚动或点击后再客户端加载，提升首屏渲染速度

最佳实践建议 #

1. 优先用SSR返回的props作为组件初始渲染的数据源，避免无意义的重复请求
2. 如果需要后续更新，把SSR数据作为客户端状态的初始值，再按需触发客户端请求更新
3. 绝对不要在组件挂载时（比如useEffect(() => {}, [])）无脑拉取和SSR相同的数据，除非你明确需要实时刷新初始内容

举个简单的代码示例：

// 服务端预获取初始数据
export async function getServerSideProps() {
  const initialStats = await fetch('/api/dashboard-stats').then(res => res.json());
  return { props: { initialStats } };
}

function DashboardPage({ initialStats }) {
  // 用SSR数据作为状态初始值
  const [stats, setStats] = useState(initialStats);

  // 按需获取最新数据
  const refreshStats = async () => {
    const latestStats = await fetch('/api/dashboard-stats').then(res => res.json());
    setStats(latestStats);
  };

  return (
    <div>
      <h2>当前统计：{stats.total}</h2>
      <button onClick={refreshStats}>刷新最新数据</button>
    </div>
  );
}

export default DashboardPage;

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