I have a page which fetches data on every request

But, it takes a while for the data to fetch so I have a loading state

the problem is

I have a dynamic route

and I want the loading page to be unique for each route

there doesn't seem to be a way to generateStaticParams with loading.js so I improvised

this is a suspense with a "fallback" to a loading state with the statically generated params

and it SHOULD show that state until my actual page loads

this is my page.tsx

snippet of my CollectionLoading:

completely static

I have this in my CollectionPage:

it fetches some data from supabase

when I run my app and navigate to "/collection/[id]" however it waits until ALL the data fetches and then shows the page

the loading state barely even shows

My question ultimetly is: is there a way to statically generate pages but have components in them be server rendered?

uhh yes?

even thats the point of generateStaticParams

its to pre-generate ALL [id] before continuing

and in dev I assume it happens on request time

but when you build it it will be run isntantly at the beginning

so there wont be any Loading Page at all

nah im talking abt after deploying it to vercel

like for instance if i have a "await sleep(5000)" in my "CollectionPage" component, even though my "page.tsx" is statically generated, it still waits 5 seconds before showing me any content

not that I have a sleep(5000) in my code just for reference 😅

Hmmm isee interesting

ok it actually does kinda work

if i reload the page it does show the loading while it fetches the data

but if i try navigating to it then it fetches everything without showing any loading state

well it is prefetched

to be fair you should be minimizing loading state if possible