I’ve created an API in the Next.js App Directory at app/api/status/route.js, which works perfectly fine when fetched from a Client Component or when tested using Postman. However, it seems that the data is not fetched properly when attempting to retrieve it from a Server Component. Nothing is returned, and I don’t see any network requests in the Developer Tools Network tab.
Here’s the code for my Server Component:
// app/page.js
async function fetchStatus() {
try {
const response = await fetch('http://localhost:3000/api/status', {
cache: 'no-store', // Fetch fresh data each time
method: 'GET',
});
if (!response.ok) {
throw new Error('Failed to fetch');
}
const data = await response.json();
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>
);
}
And here is the API route code:
// app/api/status/route.js
import { NextResponse } from 'next/server';
export async function GET(request) {
return NextResponse.json({ message: "working" });
}
Problem:
The API route returns the expected response when tested with Postman.
The data is correctly fetched and displayed when using a Client Component.
The data is not fetched and nothing appears in the Network tab when using the Server Component.
What I’ve Tried:
Ensured that the URL used in the fetch request is correct and accessible.
Checked the API route to confirm it returns data as expected.
Verified that there are no network issues or CORS issues.
Question:
What am I doing wrong, and how can I resolve this issue so that the server component can fetch data from the API route correctly?
You can make a better structure like this and find your solution :
//app.page.tsx
"use client";
import { useEffect, useState } from "react";
async function fetchStatus() {
try {
const response = await fetch("/api/status", {
cache: "no-store",
method: "GET",
});
if (!response.ok) {
throw new Error("Failed to fetch");
}
const data = await response.json();
return data.message;
} catch (error) {
console.error("Error fetching status:", error);
return "Error fetching data";
}
}
export default function HomePage() {
const [status, setStatus] = useState("Loading...");
useEffect(() => {
async function getStatus() {
const result = await fetchStatus();
setStatus(result);
}
getStatus();
}, []);
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>
);
}//app/api/status/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
return NextResponse.json({ message: 'Hello from Next.js!' });
}
export async function POST() {
return new NextResponse('Method not allowed', { status: 405 });
}1