Will a fetch call in a Page function be shipped with the client scripts in Next.js 13

Question

I just started playing around with web dev
I am using Next.js 13 (I think)

I have setup the project to use App Router instead of Page Router

This is my main page:

export default async function Page() {
  const res = await fetch('API CALL WITH A TOKEN', { next: { revalidate: 30 } })
  const data = await res.json()

  return (<>
    {data}
  </>)
}

I made the function async and used fetch in it (read it on a SO thread i think)
Apparently this is the way of using ISR in Next13 and since im really new to this environment
Will the URL be shipped somewhere in the client scripts or html, it is very critical this API key is not leaked

NOTE: I want the html to be entirely rendered server-side (because i dont want to leak the API key) and not on every request, this is why I chose ISR

Brown bear · Accepted Answer

Hi, your API keys will not be exposed to the client, since this code will run on the server. In case you need to use a client component, you can achieve the same result by using Route Handlers
https://nextjs.org/docs/app/building-your-application/routing/router-handlers

Will a fetch call in a Page function be shipped with the client scripts in Next.js 13

2 Replies