Next.js SSR组件调用API仅返回首个对象问题求助

核心问题分析 #

你遇到的API端点直接访问正常，但SSR组件调用仅返回单条数据的问题，主要由两个原因导致：

1. 模板字符串语法错误 #

getRecords函数中，fetch的URL使用双引号包裹模板字符串，导致${process.env.BASE_URL}无法被正确解析，会被当作普通字符串处理：

// 错误写法
const res = await fetch("${process.env.BASE_URL}/api/records");

若环境变量未正确配置或语法错误导致请求路径异常，可能意外命中仅包含第一条记录的旧缓存。

2. Next.js fetch默认缓存机制 #

Next.js App Router中，fetch默认采用缓存优先策略。如果组件首次请求时数据库只有第一条记录，后续请求会直接读取缓存，不会重新查询数据库获取最新数据。

修复步骤 #

步骤1：修正模板字符串语法 #

将fetch的URL包裹改为反引号，确保环境变量被正确解析：

async function getRecords() {
  // 正确写法：使用反引号包裹模板字符串
  const res = await fetch(`${process.env.BASE_URL}/api/records`, {
    // 禁用缓存，强制每次请求获取最新数据
    cache: 'no-store'
  });
  if (!res.ok) {
    console.log("ERROR");
    throw new Error("Failed to fetch records");
  }
  return res.json();
}

步骤2：禁用fetch缓存（关键） #

在fetch选项中添加cache: 'no-store'，避免读取旧缓存。你也可以根据需求使用revalidate: 0（与no-store等价），或设置特定重新验证时间（如revalidate: 60表示60秒后更新缓存）。

可选：直接在SSR组件中调用Prisma #

既然是SSR组件，可直接在组件内部调用Prisma查询数据库，跳过API路由，减少网络请求同时避免缓存问题：

import prisma from '@/lib/prisma'; // 导入你的Prisma客户端实例

export default async function LeaderBoard() {
  try {
    const records = await prisma.record.findMany();
    console.log(records);
    return (
      <div>
        {records.map((rec: Record, idx: number) => (
          <p key={idx}>{rec.username}</p>
        ))}
      </div>
    );
  } catch (error) {
    console.error("Failed to fetch records:", error);
    return <div>Failed to load leaderboard</div>;
  }
}

验证方法 #

1. 重启开发服务器，确保环境变量生效
2. 在组件中添加console.log(process.env.BASE_URL)，确认环境变量被正确读取
3. 打开浏览器开发者工具的Network标签，检查请求URL是否正确，且响应返回全量数据

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