Next.js中使用ISR时，为什么首屏静态文件仍被阻塞加载？

___子瑄提问于 2026-01-30 20:55:33 阅读 72

优化

我在用Next.js做博客项目，配置了getStaticProps+incremental static regeneration。按文档把文章列表页设为静态生成，详情页用revalidate=100，但首屏加载时发现app-router生成的_global.css和chunks文件依然在阻塞渲染，首屏时间没明显优化。尝试过在next.config.js里加了optimizeFonts: true，但控制台还是显示这些静态资源在等待SSG数据？

代码配置是这样的：export const revalidate = 100，页面用：

  
export const getStaticProps = async () => {  
  const posts = await fetchAPI('/posts');  
  return { props: { posts }, revalidate: 100 };  
}

但看网络请求发现，即使缓存命中的情况下，_next/static/chunks/pages/(blog)/[slug].js仍然要等SSG数据解析完才加载，这和预期的预加载静态资源冲突了。是不是ISR和app路由的静态优化有兼容问题？

增量静态生成首屏优化

我来解答赞 14 收藏

反馈

2 条解答

Prog.雯婧 Lv1

这个问题挺典型的，主要是你对ISR和静态资源加载的机制理解上有点偏差。简单说下原因和解决办法：

首先，Next.js的ISR确实会让页面在首次构建后生成静态HTML，但问题在于你的_css和chunks文件是属于客户端 hydration 的部分，而不是SSG/ISR本身的问题。这些资源会被阻塞是因为浏览器默认会把一些CSS标记为render-blocking（渲染阻塞），尤其是_global.css这种全局样式。

要优化这个情况，可以试试下面几个方法：

1. **拆分CSS**：把_global.css里不必要的样式拆分到组件级CSS模块中，减少全局样式的体积。Next.js支持CSS Modules，这样可以让某些样式按需加载。

2. **非阻塞加载CSS**：在next.config.js里设置：

module.exports = {

     experimental: {

       optimizeCss: true,

     },

   };

这样可以减少CSS的阻塞行为。

3. **代码分割**：检查你的[slug].js文件是否包含了太多无用的逻辑。可以通过React.lazy或者dynamic import来进一步分割代码。比如：

import dynamic from 'next/dynamic';

   const PostDetail = dynamic(() => import('../components/PostDetail'), { ssr: false });

4. **优先级调整**：确保你的关键资源（比如首屏需要的样式和脚本）被优先加载，非关键资源可以延迟加载。可以在next.config.js里调整webpack配置：

module.exports = {

     webpack(config) {

       config.optimization.splitChunks = {

         cacheGroups: {

           default: false,

         },

       };

       return config;

     },

   };

最后再补充一句，ISR和app路由其实是没有兼容问题的，主要还是静态资源的加载顺序和优先级没处理好。按照上面的方法调优一下，应该能明显改善首屏时间。如果还存在问题，建议检查下具体的网络瀑布图，看看哪些具体资源在阻塞。

2026-02-02 17:13

南宫照涵 Lv1

ISR确实是个好东西，但Next.js的静态资源加载机制有时候会让人头大。我自己也踩过类似的坑，说白了就是ISR和静态资源的加载顺序没处理好。

问题的核心在于：_next/static/chunks这些文件虽然是静态资源，但它们的加载会被SSG数据解析阻塞，尤其是当你的getStaticProps里有异步请求时。即使设置了revalidate，首屏渲染时还是得等数据先准备好。

解决办法有两个方向：

1. **优化数据获取逻辑**
把不依赖动态数据的部分拆出来，放到客户端去加载。比如文章列表可以做成纯静态，详情页再用ISR。这样首页的静态资源就不会被阻塞了。

// 示例：把posts分离到客户端获取

   export default function BlogPage({ initialPosts }) {

     const [posts, setPosts] = useState(initialPosts);



     useEffect(() => {

       fetchAPI('/posts').then(setPosts);

     }, []);



     return <div>{/* 渲染 posts */}</div>;

   }



   export async function getStaticProps() {

     // 只提供初始数据，减少SSG负担

     const initialPosts = await fetchAPI('/posts', { limit: 10 });

     return { props: { initialPosts }, revalidate: 100 };

   }

2. **调整静态资源优先级**
如果不想改代码逻辑，可以在next.config.js里配置reactStrictMode为false（虽然有点反直觉），或者试试升级Next.js版本（官方在v13之后对静态资源加载做了优化）。另外，确保你用的是app路由而不是老式的pages路由，因为新架构对ISR的支持更好。

血泪教训告诉你：别指望单靠revalidate就能完全解决首屏阻塞问题，数据获取的方式和时机才是关键。如果还有疑问，直接看网络面板里的Blocking时间就知道是哪里卡住了。

2026-01-31 14:10