Theo's Typesafe Cult•14mo ago

NextJS Static Export

I am building a NextJS app that is going to be static. For that, in my articles path I have a dynamic route. Using generateStaticParams I call the backend to retrieve all articles so we know with what values the path param will be used. This seems to work great. However, what I now see when I run npm run build (with all, bun, npm and pnpm) is my page also does a call on the backend with the value [id] which is the folder name and thus dynanmic route segment. I do not expect that to happen. Why does that happen, and how can I mitigate that? I just feel dumb now.

Solution:

Also have you maybe opt out of caching? https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching

Data Fetching: Fetching, Caching, and Revalidating

Learn how to fetch, cache, and revalidate data in your Next.js application.

Jump to solution

9 Replies

MartinOP•14mo ago

I don't realy understand yet where it comes from and why it is done. And the documentation of NextJS does not seem to help me any further as well

alexmartos•14mo ago

Does it render dynamically with params not generated during build (ISR)?

Solution

alexmartos•14mo ago

Also have you maybe opt out of caching? https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching

Data Fetching: Fetching, Caching, and Revalidating

Learn how to fetch, cache, and revalidate data in your Next.js application.

MartinOP•14mo ago

I do not understand the former part of your question. Something (I do not know what exactly) is doing a call to :8080/articles/[id] with [id] url encoded. Should caching be disabled manually when you enable the output export ? I am now checking if I added a disable cache Ah yes, I added a revalidate set to zero. Now to understand why that somehow then triggered to call to the route with the foldername itself

alexmartos•14mo ago

Then that should be it🙂 What do your mean “call to to the route with the folder name itself”? Also, does it work more like expected now?

MartinOP•14mo ago

Well, in my logic (the default Page function) I saw two requests for the backend articles (1, and 2) as expected. Then I saw also a request going to /articles/%5Bid%5D which is url-encoded [id]. But the generateStaticParams did generate just the normal expected parameters, 1 and 2.

alexmartos•14mo ago

That weird, will try to replicate now to see Could not replicate, it generates HTML for the params I return but could not see the folder name at all, where do you see the folder name request in the console? Do you console log somewhere?

MartinOP•14mo ago

I added console.logs in my code (I am a pro in debugging..) and I saw it coming as the third. I'll accept I solved it by removing the cache disabling. Took me too much time to dive into this.

export default async function Page({ params }: { params: { id: number } }) {
  const { article, contentHtml } = await getData(params.id);

export default async function Page({ params }: { params: { id: number } }) {
  const { article, contentHtml } = await getData(params.id);

And then getData is:

async function getData(id: number) {
  try {
    callApi(id)
} catch { throw error }

async function getData(id: number) {
  try {
    callApi(id)
} catch { throw error }

alexmartos•14mo ago

Yeah, that’s weird hehe. Glad it worked out!

Gaming

Programming

NextJS Static Export