I am using app router and I understand there isn't really a point calling a route handler in a server component when I can just run the code to get the data from the server component.
Let's say I have a route.tsx file under app > api
# route.tsx
import { NextResponse } from "next/server";
export async function GET() {
let message = await db.get("smth"); # Just imagine this is getting smth from db
return NextResponse.json(message);
}
In my page.tsx file, I could call the route handler like this, which I know is stupid since there will be an unnecessary network call.
# page.tsx
export default async function Page() {
let data = await fetch("http://localhost:3000/api");
let json = await data.json();
return <div>{json.message}</div>;
}
However, what if I call the route handler like this by importing it:
# page.tsx
import { GET } from "../api/route";
export default async function Page() {
let data = await GET();
let json = await data.json();
return <div>{json.message}</div>;
}
Will it be similar to doing this? I assume the code below is the intended way of fetching data
# page.tsx
const getMessage = async () => {
return await db.get("smth");
}
export default async function Test() {
let data = await getMessage();
let json = await data.json();
return <div>{json.message}</div>;
}
Is there really a significant difference between the last 2 code blocks?
