Next.js 13 SSG页面数据刷新及Netlify生产环境500错误求助

方案一：客户端主动刷新SSG页面数据 #

SSG页面构建后为静态资源，Next.js客户端导航时会缓存页面组件，导致跳转后无法自动获取新数据。可通过监听路由变化，在客户端主动重新请求数据：

• 在列表页添加客户端逻辑，监听路由参数或路径变化，触发数据重新获取：

'use client';
import { useEffect, useState } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

export default function CategoryList() {
  const [categories, setCategories] = useState([]);
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const fetchLatestCategories = async () => {
    const res = await fetch('/api/categories', { cache: 'no-store' });
    const data = await res.json();
    setCategories(data);
  };

  // 初始加载+路由变化时重新获取数据
  useEffect(() => {
    fetchLatestCategories();
  }, [pathname, searchParams]);

  // 渲染列表逻辑
  return (
    <div>
      {categories.map(category => (
        <div key={category.id}>{category.name}</div>
      ))}
    </div>
  );
}

• 保留页面的revalidate属性，确保硬刷新时触发增量静态再生：

export const revalidate = 60; // 按需调整再生间隔

方案二：修复Netlify动态页面500错误 #

设置dynamic = "force-dynamic"后，Netlify需正确配置以支持Next.js App Router的动态页面：

• 升级Netlify Next.js插件：确保使用最新版@netlify/plugin-nextjs，旧版本对App Router动态页面支持存在缺陷。
• 校验部署配置：Netlify控制台中，Build command设为next build，Publish directory设为.next。
• 捕获服务器端错误：在动态页面的服务器端数据获取逻辑中添加错误捕获，避免未处理异常导致500：

export default async function CategoryList() {
  try {
    const res = await fetch(`${process.env.API_BASE}/categories`, { cache: 'no-store' });
    if (!res.ok) throw new Error('数据请求失败');
    const categories = await res.json();
    return <div>{/* 渲染列表 */}</div>;
  } catch (err) {
    return <div>加载失败，请稍后重试</div>;
  }
}

• 查看函数日志：Netlify控制台的「Functions」面板可查看动态页面对应的Edge/Serverless函数错误日志，排查超时、权限等问题。

方案三：ISR结合客户端导航刷新 #

兼顾SSG性能与数据实时性，可使用增量静态再生（ISR）+客户端导航后刷新：

• 服务器端配置ISR：

export async function getStaticProps() {
  const res = await fetch('https://your-api-domain/categories');
  const categories = await res.json();

  return {
    props: { categories },
    revalidate: 10, // 每10秒允许重新生成页面
  };
}

• 客户端监听导航事件，强制刷新数据：

'use client';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

export default function CategoryList({ initialCategories }) {
  const [categories, setCategories] = useState(initialCategories);
  const router = useRouter();

  useEffect(() => {
    const updateDataOnNavigation = async () => {
      const res = await fetch('/api/categories', { cache: 'no-store' });
      const freshData = await res.json();
      setCategories(freshData);
    };

    // 导航完成后更新数据
    const unsubscribe = router.afterEach(updateDataOnNavigation);
    return unsubscribe;
  }, [router]);

  return (
    <div>{/* 渲染列表 */}</div>
  );
}

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