Next.js项目中API数据获取及页面渲染性能优化建议咨询

架构老林

2026-4-21

看到你遇到了分类页面加载过慢的问题——明明只需要渲染3个产品，却要等4-6秒，确实挺影响用户体验的。我结合你贴的代码，整理了几个可能的优化方向，你可以逐一排查试试：

检查API请求URL的构建逻辑
我注意到你在getProductsByCategory里直接复用了全局的productsURL实例，然后往它的searchParams里追加参数。如果这个函数被多次调用（比如不同分类的请求、或者预取触发的请求），会导致同一个URL对象被反复添加相同的category_slug参数，最终请求URL会变成?category_slug=xxx&category_slug=xxx...这种重复参数的格式。服务器收到这种请求可能会解析出错，或者执行不必要的处理，直接拖慢响应速度。
你可以改成每次创建新的URL实例，避免污染全局对象：
```
export async function getProductsByCategory(category) {
  // 每次创建新的URL实例，确保参数干净
  const url = new URL(productsURL);
  const params = {
    category_slug: category,
  };
  Object.keys(params).forEach((key) =>
    url.searchParams.append(key, params[key])
  );
  const products = await fetchTemplate(url, "GET", publicHeaders);
  return products;
}
```
优化数据请求的缓存策略
目前你的API请求没有明确设置缓存规则，可能每次访问同一个分类都要重新从服务器拉取数据。你可以在fetchTemplate或者直接在fetch请求中添加缓存配置，利用浏览器和Next.js的缓存机制来提速：
比如在fetch时加上cache: 'force-cache'（Next.js服务器组件默认是这个，但如果你的fetchTemplate覆盖了配置的话需要手动设置），或者用'stale-while-revalidate'策略，让页面先显示缓存数据，后台再更新最新数据，几乎消除等待时间：
```
// 在fetchTemplate里修改fetch配置
const response = await fetch(url, {
  method,
  headers,
  cache: 'stale-while-revalidate',
  next: { revalidate: 3600 } // 可选：设置1小时后重新验证缓存
});
```
确认Link预取是否正常工作
你已经在NavMenu的Link组件里加了prefetch={true}，这个是对的——Next.js在生产环境中会在用户悬停链接时预取目标页面的数据，点击时就能直接渲染。不过要注意：
- 预取只在生产环境生效，开发环境不会触发
- 确保你的API支持跨域预取（如果API和前端不在同一个域名下）
  可以在浏览器的网络面板里，悬停导航链接时看看有没有提前发起分类页面的API请求，来确认预取是否正常。
替换不稳定的key值
你现在用uuid()作为ProductCard和分类列表的key，虽然这不会直接导致加载慢，但React的diff算法会因为每次key都不一样，认为是全新的组件，触发不必要的重新渲染。建议换成数据本身的唯一ID（比如product.id、cat.id），保持key的稳定性，减少额外的渲染开销：
```
// CategoryPage里的ProductCard
{products.map((product) => (
  <ProductCard key={product.id} name={product.name} price={product.price} />
))}
```
排查API本身的响应速度
先排除API端的问题：直接在浏览器或者Postman里访问分类API的URL（比如https://your-api.com/products?category_slug=xxx），看看请求的TTFB（Time To First Byte）是多少。如果TTFB就已经有4-6秒，那问题出在API服务器：
- 给数据库的category字段加索引，加速分类过滤查询
- 检查API服务器的性能，比如是否有资源占用过高、数据库查询逻辑冗余等问题
- 可以在API端开启Gzip压缩，减少数据传输大小

添加请求超时机制
万一API偶尔响应缓慢，你可以给fetch请求加个超时，避免页面一直处于加载状态。比如用AbortController来中止超时的请求：

export async function getProductsByCategory(category) {
  const url = new URL(productsURL);
  url.searchParams.append('category_slug', category);
  
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒超时
  
  try {
    const products = await fetchTemplate(url, "GET", publicHeaders, { signal: controller.signal });
    clearTimeout(timeoutId);
    return products;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('API请求超时，请检查服务器状态');
      // 这里可以返回备用数据或者提示用户
    }
    throw error;
  }
}

记得在你的fetchTemplate里把signal参数传给fetch请求。

优化ProductCard的渲染性能
如果ProductCard组件里有未优化的图片（比如直接用img标签加载大尺寸图片），或者有复杂的计算逻辑，也会拖慢页面渲染速度。建议：
- 用Next.js的Image组件替代原生img，自动压缩图片、支持懒加载
- 检查ProductCard里有没有不必要的useEffect、useState，或者昂贵的计算（比如在渲染时处理数据），尽量把计算移到数据获取阶段

备注：内容来源于stack exchange，提问作者Vasile Midrigan