Hi everyone,I'm using Next App Router. Here is my question:I have an api (located in /app/api/my-api.route.ts) that I want to fetch from within a page.tsx server component (located in the app directory).But I can't fetch("/api/my-api"), I have to fetch("https:// : /api/my-api").How can I dynamically get the origin part (https:// : ) in order to build a proper full url?No problem from within a route.ts, because the GET/POST/etc. methods are provided with the NextRequest. But from a server component?Thank you!

How to fetch with global url from an app page?

Unanswered

Asiatic Lion posted this in #help-forum

Asiatic LionOP

2023-06-21T10:59:53.000Z

Hi everyone,

I'm using Next App Router. Here is my question:

I have an api (located in /app/api/my-api.route.ts) that I want to fetch from within a page.tsx server component (located in the app directory).

But I can't fetch("/api/my-api"), I have to fetch("https://<server>:<port>/api/my-api").

How can I dynamically get the origin part (https://<server>:<port>) in order to build a proper full url?

No problem from within a route.ts, because the GET/POST/etc. methods are provided with the NextRequest. But from a server component?

Thank you!

16 Replies

@Asiatic Lion Hi everyone, I'm using Next App Router. Here is my question: I have an api (located in /app/api/my-api.route.ts) that I want to fetch from within a page.tsx server component (located in the app directory). But I can't fetch("/api/my-api"), I have to fetch("https://<server>:<port>/api/my-api"). How can I dynamically get the origin part (https://<server>:<port>) in order to build a proper full url? No problem from within a route.ts, because the GET/POST/etc. methods are provided with the NextRequest. But from a server component? Thank you!

DirtyCajunRice | AppDir

2023-06-21T11:01:15.000Z

you shouldnt be fetching server data from the server

just do the logic directly

Asiatic LionOP

2023-06-21T11:07:39.000Z

Ok, I understand the answer. I'm trying to fetch server data from the server to use the fetch cache mechanism, which can be invalidate with revalidateTag(tag).
I could use the cache() function, but there is no way to invalidate the cache.
So the question become: do I need to somehow elaborate my own caching system?

@Asiatic Lion Ok, I understand the answer. I'm trying to fetch server data from the server to use the fetch cache mechanism, which can be invalidate with revalidateTag(tag). I could use the cache() function, but there is no way to invalidate the cache. So the question become: do I need to somehow elaborate my own caching system?

DirtyCajunRice | AppDir

2023-06-21T11:12:48.000Z

huh? you can do all of that without an api route

Asiatic Lion

2023-06-21T11:30:28.000Z

Oh I stumbled across this recently too. @DirtyCajunRice | AppDir the official docs only mention tags as part of fetch. Other than that they seem to only mention revalidatePath.

So let's say I have a server component like

export default function Posts() {
  const posts = db.getPosts();
  return posts.map((post) => <Post post={post} key={...} />)
}

How do you cache the database request and invalidate it later using revalidateTag?

Not sure if that's what OP is asking, but it's something I couldn't figure out and might be related

@Asiatic Lion Oh I stumbled across this recently too. <@184479429404262410> the official docs only mention tags as part of fetch. Other than that they seem to only mention `revalidatePath`. So let's say I have a server component like export default function Posts() { const posts = db.getPosts(); return posts.map((post) => <Post post={post} key={...} />) } How do you cache the database request and invalidate it later using `revalidateTag`? Not sure if that's what OP is asking, but it's something I couldn't figure out and might be related

DirtyCajunRice | AppDir

2023-06-21T11:31:00.000Z

you can set revalidate inside the fetch call

segment level config is a last resort

almost anything you can do at the segment level, you can do at the individual fetch call level

@DirtyCajunRice | AppDir almost anything you can do at the segment level, you can do at the individual fetch call level

Asiatic Lion

2023-06-21T11:38:27.000Z

Not sure if I understand

@Asiatic Lion Not sure if I understand

DirtyCajunRice | AppDir