generateStaticParams breaks loading component in appDir

[GetPsyched]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

• Operating System:
  • Platform: linux
  • Arch: x64
  • Version: #1 SMP PREEMPT Wed Dec 21 21:15:06 UTC 2022
• Binaries:
  • Node: 19.4.0
  • npm: 8.19.2
  • Yarn: 1.22.19
  • pnpm: N/A
• Relevant packages:
  • next: 13.1.6-canary.1
  • eslint-config-next: N/A
  • react: 18.2.0
  • react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/GetPsyched/next-bug-repro

To Reproduce

1. Once cloned the repo, run npm run dev
2. Open the launched site and click the button on the top left
3. Wait 2-4 seconds and you will see new text that replaces the button. This is from the /courses route component

Describe the Bug

generateStaticParams in /courses/page.tsx causes loading.tsx (tested) and possibly error.tsx (not tested) to not render at all.

While "waiting" for the courses component to fully render, the browser simply displays the current page until the new one has rendered.

Expected Behavior

During the aforementioned waiting period, the component in loading.tsx must be rendered. However, this does not happen.

Upon removal of the generateStaticParams function, the loading component renders as expected.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

npm run dev @ localhost

[kfirfitousi]

I've encountered this as well.
AFAIK, generateStaticParams doesn't run in development mode, each page is built the first time you navigate to it.
During that build, loading.tsx doesn't render. On further navigations to that page, it does render.
However, if you next build && next start, it works just fine.

[GetPsyched]

Wdym loading.tsx does not render during the page build? If you remove the generateStaticParams it does render; as it should.

About the next build && next start, I have tried it but the transition was too fast for me to notice if loading.tsx was rendered or not.

[kfirfitousi]

Wdym loading.tsx does not render during the page build?

I meant to say I'm having the same issue you described, sorry if that wasn't clear. Just trying to add some context 😅
From what I've gathered, generateStaticParams makes the page behave differently in development mode, which leads to loading.tsx not being rendered on the first navigation to that page.

About the next build && next start, I have tried it but the transition was too fast for me to notice if loading.tsx was rendered or not.

You can slow down the loading by throttling your network connection using the developer tools:

[natrixofficial]

Experiencing the same problem. With next 13.0.1 works as expected: during development type all the loading screens are rendered. Updating to next 13.1.5 (tested) or 13.1.6 (tested) the loadings are gone, never rendering. Commenting out the generateStaticParams function everything work as expected using Next latest (13.1.5 and 13.1.6).

[joncoronel]

Experiencing the same problem. With next 13.0.1 works as expected: during development type all the loading screens are rendered. Updating to next 13.1.5 (tested) or 13.1.6 (tested) the loadings are gone, never rendering. Commenting out the generateStaticParams function everything work as expected using Next latest (13.1.5 and 13.1.6).

Did you ever find a fix for this? Have the exact same issue.

[Dey-Sumit]

I am also facing the same issue. If want to show the loading page while the data is being fetched and then stream the data

[zartinn]

imo the different behaviour between development and build makes perfectly sense. Usually with generateStaticParams you are generating static pages, so any async operation in your pages will be done during build time when calling npm run build. After the build is done you have the dynamic data created during the build that will then just be provided by the server when running npm run start.

So there is no need for waiting for the data because it was already created during build time. Therefore the loading UI is also not rendered.

In fact you didn't even need generateStaticParams in your app when you do NOT have dynamic routes like @GetPsyched in his example. In his example you would have also the behaviour that you do NOT see the loading UI for npm run build && npm run start when commenting out generateStaticParams. And in his example the generateStaticParams makes not much sense when returning this array which should be based on a dynamic route which does not exist in his example. Maybe this is the problem why it does not render nothing at all in his example.

This static page behaviour not active during development mode. Therefore during development you'll see the loading UI. Here also some comment snippets from the documentation for generatateStaticParams:

• The generateStaticParams function can be used in combination with [dynamic route segments](https://nextjs.org/docs/app/building-your-application/routing/defining-routes#dynamic-segments) to [statically generate](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default) routes at build time instead of on-demand at request time.
• During next dev, generateStaticParams will be called when you navigate to a route.
• During next build, generateStaticParams runs before the corresponding Layouts or Pages are generated.

[zartinn]

But what I really want is that a loading UI is shown immediately when I clicked the Link component before I even get the first data back from the server. Because when dealing with slow connections you have no feedback as user when going to a different (static) page which did not finish preloading yet or does not have preloading at all.

What is the best practice here when working with the app directory in NextJS?

[Jordaneisenburger]

But what I really want is that a loading UI is shown immediately when I clicked the Link component before I even get the first data back from the server. Because when dealing with slow connections you have no feedback as user when going to a different (static) page which did not finish preloading yet or does not have preloading at all.

What is the best practice here when working with the app directory in NextJS?

Yes, when you use generateStaticParams it will either on build-time or request-time do all the async stuff so you will never see the loaders. Neither loading.tsx or your own more granular loaders manually added with Suspense. The problem with this to me is that when a page is build statically at request time for example like shown in code below. When a user clicks a link it will feel slow and unresponsive as nothing will happen untill the generation of that page is done.

I'm not sure if there is currently a way to resolve this.

export const generateStaticParams = () => {
    return [];
};

[kapilatnitsan]

I am facing the same issues, I am not able to see loading UI for component rendering , with SSG in NExtJs 13 app router. Please help .

[dannytlake]

Also experiencing this issue

• v14.2.5
• not using prefetch in Link components, ie prefetch={false}
• when using generateStaticParams in a dynamic segment (either returning an empty array, or a set of slugs), the Loading fallback is not rendered during a page navigation. Instead, the browser hangs until the entire page has been fetched. This includes awaiting for the route's top level RSC fetches, and, any RSC's fetching under Suspense. This could cause several seconds of a user experiencing a page freeze while the server fetches all data for the entire tree of Suspense, and then returns it to the browser.