Next.js App Router中Server Component无法获取API数据问题排查

核心问题1：返回字段不匹配 #

你的API路由返回的是{ message: "working" }，但Server Component的fetchStatus函数里尝试读取data.status——这个字段并不存在，最终会得到undefined，导致页面无法显示预期内容。

核心问题2：Server Component的fetch行为误解 #

Server Component在服务器端执行，fetch请求由服务器发起，不会在浏览器的网络面板中留下记录，这是Next.js的正常运行机制，并非bug。

修复步骤 #

方法1：修正前端字段读取逻辑

修改fetchStatus函数，读取API实际返回的message字段：

async function fetchStatus() {
  try {
    const response = await fetch('http://localhost:3000/api/status', {
      cache: 'no-store',
      method: 'GET',
    });
    if (!response.ok) {
      throw new Error('Failed to fetch');
    }
    const data = await response.json();
    console.log(data); // 输出 { message: "working" }
    return data.message; // 改为读取message字段
  } catch (error) {
    console.error('Error fetching status:', error);
    return 'Error fetching data';
  }
}

方法2：修改API路由返回指定字段

如果希望保留前端代码逻辑，可调整API路由返回status字段：

// app/api/status/route.js
import { NextResponse } from 'next/server';

export async function GET(request) {
  return NextResponse.json({ status: "working" }); // 返回status字段
}

优化建议：直接调用API逻辑（推荐）

在Server Component中调用内部API时，无需通过HTTP请求，直接导入并调用业务逻辑函数更高效，避免额外网络开销：

1. 抽离API逻辑到单独文件：

// app/api/status/utils.js
export async function getStatus() {
  return { status: "working" }; // 替换为你的实际业务逻辑
}

2. 在API路由中复用该函数：

// app/api/status/route.js
import { NextResponse } from 'next/server';
import { getStatus } from './utils';

export async function GET(request) {
  const data = await getStatus();
  return NextResponse.json(data);
}

3. 在Server Component中直接调用：

// app/page.js
import { getStatus } from './api/status/utils';

async function fetchStatus() {
  try {
    const data = await getStatus();
    console.log(data);
    return data.status;
  } catch (error) {
    console.error('Error fetching status:', error);
    return 'Error fetching data';
  }
}

export default async function HomePage() {
  const status = await fetchStatus();

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <p>Status from the API: {status}</p>
      </main>
    </div>
  );
}

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