Next.js 13.4 + Prisma优化：解决findMany数据过多加载缓慢问题

核心思路 #

直接在数据库查询阶段完成「随机筛选+限制数量」，避免前端加载全量数据，从根源减少数据传输量和页面加载时间。

1. 优化API层的Prisma查询 #

修改你API文件夹中的代码，通过Prisma的orderBy: { _rand: true }实现随机排序，再用take指定要获取的条目数量（比如取9条，足够轮播切换展示）：

// API中的代码修改
const items = await prisma.items.findMany({
  // 随机排序
  orderBy: { _rand: true },
  // 只取指定数量的条目，这里示例取9条
  take: 9
});

2. 简化前端处理逻辑 #

因为后端已经返回了随机筛选后的少量数据，前端无需再对全量数组做打乱操作，直接使用返回的数据即可：

// page.tsx中的主函数修改
const items = await getItems();
// 删掉 shuffleItems 相关代码，直接传items给组件
return <Items items={items} />;

为什么这样更高效？ #

• 数据库层面处理随机和数量限制，比前端加载全量数据后再处理要快得多，大幅减少网络传输的数据体积
• 避免前端因处理大量数组导致的额外性能开销

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