Next.js页面实现服务端数据自动刷新的方案咨询

首先纠正你对getStaticProps中revalidate的理解：它是Next.js的**增量静态再生（ISR）**机制，作用是当页面收到新请求时，检查上次静态生成的时间是否超过revalidate时长，若超过则在服务端重新生成页面并缓存。但它不会主动触发前端页面自动刷新——你的浏览器不会每隔5秒自动发起新请求，只有手动刷新或有新访问时才会触发页面重生成，这就是你没达到预期的核心原因。

要实现「每隔X时长自动刷新数据，且API调用在服务端完成」，推荐以下两种方案：

方案一：SWR + 服务端API路由（推荐，平滑局部刷新） #

这种方式通过Next.js API路由在服务端调用树莓派的FastAPI，再用SWR库实现前端定时、局部刷新数据，体验更流畅。

1. 创建服务端API路由
   在pages/api目录下新建stats.ts，负责在服务端请求树莓派接口：

// pages/api/stats.ts
export default async function handler(req, res) {
  try {
    // 替换为你的树莓派FastAPI接口地址
    const response = await fetch('http://你的树莓派IP:端口/目标接口');
    const stats = await response.json();
    res.status(200).json(stats);
  } catch (error) {
    res.status(500).json({ error: '获取设备状态失败' });
  }
}

2. 页面组件中使用SWR定时获取数据
   先安装SWR依赖：npm install swr，然后修改页面组件：

import useSWR from 'swr';

// 定义请求函数，调用我们的服务端API路由
const fetcher = async (url: string) => {
  const res = await fetch(url);
  return res.json();
};

export default function Stats() {
  // 每5秒自动刷新数据（将5000改为你需要的毫秒数）
  const { data: stats, error } = useSWR('/api/stats', fetcher, {
    refreshInterval: 5000,
  });

  if (error) return <div>加载状态失败</div>;
  if (!stats) return <div>加载中...</div>;

  return (
    <pre>
      {stats.cpu_percent}<br />
      {stats.cpu_freq[0]}
    </pre>
  );
}

这里无需再使用getStaticProps，所有对树莓派API的调用都在Next.js服务端完成，前端仅负责定时拉取服务端处理后的结果。

方案二：getServerSideProps + 前端页面刷新（简单直接） #

如果不想引入额外库，可以用getServerSideProps在每次页面请求时服务端调用API，再通过前端定时刷新整个页面：

import { useEffect } from 'react';

export async function getServerSideProps() {
  // 替换为你的树莓派FastAPI接口地址
  const stats = await fetch('http://你的树莓派IP:端口/目标接口')
    .then(res => res.json());

  return {
    props: { stats },
  };
}

export default function Stats({ stats }) {
  // 每5秒刷新整个页面（将5000改为你需要的毫秒数）
  useEffect(() => {
    const interval = setInterval(() => {
      window.location.reload();
    }, 5000);

    // 组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []);

  return (
    <pre>
      {stats.cpu_percent}<br />
      {stats.cpu_freq[0]}
    </pre>
  );
}

这种方式实现简单，但会刷新整个页面，用户体验不如方案一。

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