Next.js单页组件如何结合SSR/SSG实现定时动态加载API数据？

一、混合静态生成与客户端实时请求 #

Next.js支持在同一页面中组合不同的数据获取策略，核心思路是页面层用增量静态再生（ISR）处理低频更新组件，高频组件单独在客户端发起实时请求：

1. 组件A（每6小时更新）：用ISR实现服务端缓存 #

在页面的getStaticProps中配置revalidate字段，让页面每6小时自动重新生成并缓存，组件A直接复用服务端预渲染的数据：

// pages/your-page.js
export async function getStaticProps() {
  const aData = await fetch('A-API').then(res => res.json());
  return {
    props: { aData },
    revalidate: 6 * 60 * 60, // 转换为秒：6小时
  };
}

export default function YourPage({ aData }) {
  return (
    <div>
      <ComponentA data={aData} />
      <ComponentB />
    </div>
  );
}

这种方式下，组件A的内容会在服务端预渲染，缓存到期后自动触发更新，无需客户端额外请求。

2. 组件B（每秒更新）：客户端定时请求 #

直接在组件内部用useEffect实现定时轮询，或者用状态管理库简化逻辑：

// components/ComponentB.js
import { useState, useEffect } from 'react';

export default function ComponentB() {
  const [data, setData] = useState(null);

  const fetchRealTimeData = async () => {
    const res = await fetch('B-API');
    const newData = await res.json();
    setData(newData);
  };

  useEffect(() => {
    // 初始加载
    fetchRealTimeData();
    // 每秒轮询
    const interval = setInterval(fetchRealTimeData, 1000);
    // 组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []);

  if (!data) return <div>Loading...</div>;
  return <div>{/* 渲染实时数据 */}</div>;
}

二、用SWR实现组件级自定义刷新频率 #

完全可以用SWR实现不同组件的延迟/轮询需求，它的refreshInterval配置能精准控制请求频率，还自带缓存、重试等优化：

1. 组件A（6小时刷新一次） #

// components/ComponentA.js
import useSWR from 'swr';

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

export default function ComponentA() {
  const { data } = useSWR('A-API', fetcher, {
    refreshInterval: 6 * 60 * 60 * 1000, // 6小时（毫秒为单位）
    revalidateOnFocus: false, // 可选：页面聚焦时不触发额外请求
  });

  if (!data) return <div>Loading...</div>;
  return <div>{/* 渲染缓存数据 */}</div>;
}

2. 组件B（每秒刷新） #

// components/ComponentB.js
import useSWR from 'swr';

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

export default function ComponentB() {
  const { data } = useSWR('B-API', fetcher, {
    refreshInterval: 1000, // 每秒刷新一次
  });

  if (!data) return <div>Loading...</div>;
  return <div>{/* 渲染实时数据 */}</div>;
}

三、关键注意事项 #

• 避免全页SSR：如果页面用SSR，每次请求都会重新渲染整个页面，浪费资源。ISR+客户端请求的组合是更高效的方案。
• API限流：组件B每秒调用API要注意后端限流规则，必要时可适当调整刷新间隔（比如2-5秒），避免触发接口防护机制。
• 缓存层级选择：ISR的缓存是在Next.js服务器层面，SWR的缓存是在客户端，可根据数据敏感度和性能需求选择。

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