Next.js 13项目运行缓慢且页面多次渲染求助

一、重复渲染排查 #

• 检查组件状态与依赖：避免在渲染函数中创建新对象、数组或函数作为useEffect/useCallback的依赖，这类操作会触发不必要的重渲染。用useMemo缓存计算结果，useCallback缓存函数：

  // 错误示例：每次渲染生成新数组
  const filteredList = rawList.filter(item => item.status === 'active');
  
  // 正确示例：缓存计算结果
  const filteredList = useMemo(() => rawList.filter(item => item.status === 'active'), [rawList]);
  

• 关闭Strict Mode验证：Next.js 13默认开启Strict Mode，开发环境下会强制组件渲染两次以检测副作用。如果是开发环境的重复渲染，可临时在next.config.js中关闭：

  module.exports = {
    reactStrictMode: false,
  };
  

• 用React DevTools定位问题：打开React DevTools的Profiler面板，录制页面渲染流程，查看哪些组件频繁重渲染，针对性优化。

二、性能优化方案 #

• App Router 资源合理分配：优先用Server Components处理无需交互的内容，减少客户端JS体积；仅在需要交互时标记'use client'转为Client Components，避免全量客户端渲染。
• 组件懒加载：对非首屏的大组件用dynamic导入实现懒加载，降低首屏加载压力：

  import dynamic from 'next/dynamic';
  const ChartComponent = dynamic(() => import('../components/ChartComponent'), {
    loading: () => <span>加载中...</span>,
    ssr: false,
  });
  

• 静态资源优化：用next/image组件替代原生img，自动完成图片压缩、格式转换和懒加载；在next.config.js中配置静态资源缓存策略：

  module.exports = {
    headers: async () => [
      {
        source: '/assets/(.*)',
        headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000' }],
      },
    ],
  };
  

• 构建与编译优化：确保开启SWC编译器（Next.js默认启用），禁用不必要的第三方插件；生产构建时开启swcMinify压缩代码：

  module.exports = {
    swcMinify: true,
  };
  

• 数据请求优化：如果用SSR或SSG，避免N+1查询问题，批量获取数据；客户端请求用SWR或React Query缓存请求结果，减少重复请求。

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