Next.js的ISR为什么在部署后无法自动更新静态页面？

司空士懿提问于 2026-02-04 11:56:31 阅读 85

框架

我在用Next.js的Incremental Static Regeneration功能时遇到了奇怪的问题。按照文档配置了getStaticProps和revalidate参数，本地开发环境每30秒页面数据都能正常刷新。但部署到Vercel后 ISR完全没反应，手动触发构建也没用。

已经检查过：

1. 确保revalidate设为30不是0

2. 部署配置里开启了Incremental Static Regeneration

3. 在getStaticProps里正确返回了revalidate

页面组件里用的CSS样式也没问题，但奇怪的是部署后这个轮播图样式突然失效了：


.carousel {
  overflow: hidden;
  white-space: nowrap;
  max-width: 80vw;
  margin: 2rem auto;
}
.slide {
  display: inline-block;
  width: 300px;
  transition: transform 0.3s ease-in-out;
}

明明本地正常显示轮播效果，部署后却变成垂直排列的卡片。难道ISR影响了CSS加载？还是环境配置哪里漏了？

ISR原理 Next.js 全栈开发

我来解答赞 6 收藏

反馈

2 条解答

景岩酱~ Lv1

部署后ISR不生效一般有两个原因。第一个是Vercel的缓存配置问题，第二个是getStaticProps里的数据源没处理好。先看代码：

export async function getStaticProps() {

  const res = await fetch('https://api.example.com/data');

  const data = await res.json();



  return {

    props: {

      data,

    },

    revalidate: 30,

  };

}

如果fetch的接口有缓存，或者需要动态计算数据，务必加上no-store选项。否则Vercel可能拿到的是旧数据，自然不会触发更新。改成这样：

const res = await fetch('https://api.example.com/data', {

  cache: 'no-store',

});

至于样式错乱，是Next.js打包CSS时出了问题。检查一下组件引入方式，确保.carousel和.slide的class没有被动态import的组件隔离。如果用了CSS Module，直接用.carousel名会被hash处理，导致样式不生效。建议改用全局CSS或者用emotion/styled方案。

总结：先改数据获取时的缓存策略，再查样式加载方式，这两个地方改一下就能跑通。

2026-02-06 21:15

百里雯婷 Lv1

ISR不生效一般有两个原因：缓存没过期或者服务端没触发。先说CSS的问题，可能是你用了CSS-in-JS的写法导致样式丢失，ISR生成页面的时候没把样式正确打包进去。你可以试试用全局CSS或者加个className看看。

ISR的问题先检查这几个地方：

1. **确保revalidate生效**
getStaticProps里revalidate设成30，检查有没有拼写错误。

export async function getStaticProps() {

     const data = await fetchData();

     return {

       props: { data },

       revalidate: 30, // 确保不是0

     };

   }

2. **Vercel部署配置**
部署到Vercel的时候，确认你在next.config.js里没关掉ISR：

module.exports = {

     // 其他配置

     experimental: {

       isr: {

         allowQueryOverrides: true,

       },

     },

   };

3. **触发更新**
ISR不是实时更新，只有在页面被访问之后，才会触发后台更新。你可以用curl访问下页面：

curl https://your-site.vercel.app/your-page

然后等30秒，再访问一次看数据有没有更新。

4. **查看日志**
登录Vercel后台，查看ISR有没有报错，有时候数据接口超时也会导致更新失败。

如果还是不行，可以试试手动调用revalidate API：

// pages/api/revalidate.js

export default async function handler(req, res) {

  try {

    await res.unstable_noStore().revalidate('/your-page');

    return res.json({ revalidated: true });

  } catch (err) {

    return res.status(500).send('Error revalidating');

  }

}

然后用curl触发：

curl https://your-site.vercel.app/api/revalidate

CSS加载失败可能是打包配置的问题，建议检查下构建日志有没有样式相关的warning或error。

2026-02-04 12:02