Nextjs making static pages into dynamic

[exotic tapir]

Hi I am facing this issue that nextjs is making my static pages into dynamic why is it that kindly help me

[dusky imp]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[lilac dew]

Hello, without your code I can tell you only this https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

[exotic tapir]

Thank you.
I can share code what part you would like to see ?

[lilac dew]

It is about the page which is converting to dynamic instead of static

[exotic tapir]

I commented this code which in main layout
and it's not converting them into dynamic
so how should I achieve both things

should I add this export const dynamic = 'force-static' ?

[lilac dew]

that would make probably everything static.. i dont know much about tanstack hydration, maybe you should take a look into their docs https://tanstack.com/query/v4/docs/framework/react/guides/ssr

[exotic tapir]

I added the dynamic='force-static' but prefetch is not working

Well I did the above coding using the docs

let me check if I find anything

[lilac dew]

ah okay.. btw. where is your queryclientprovider?

[exotic tapir]

It's in the top layout.js

In the docs Hydration is done for a specific component
But in my case i am doing in a layout
so I should somehow do it for the specific component i think

[tight marlin]

is this your problem?

[exotic tapir]

wdym?

[tight marlin]

you said you have issue that nextjs is making static pages into dynamic.

so you want them static right?

[exotic tapir]

yes and also the prefetch part

[exotic tapir]

check this

[tight marlin]

nice

so your only problem is these right?

the one with []

like [id] and [[...id]]

[exotic tapir]

that's alirght but when I perform prefetch all the static pages also becomes dynamic

[tight marlin]

interesting

whats inside the usePrefetch function?

[exotic tapir]

api call

[tight marlin]

show code

or snippet

or import statements

[exotic tapir]

So If I perform the api call in server component instead of in layout
will this issue be solved ?

[tight marlin]

your layout is still in server component

im not sure what is inside the "prefetchQuery" function that is making it dynamic

what is inside the getCompany function?

also protip: you dont have to pass queryClient everywhere ;)

[exotic tapir]

I am doing it because we have to create on instance of queryclient which then we hydrate it once

[tight marlin]

you can do it without passing it everywhere with the cache() function

[tight marlin]

what is inside getToken?

[exotic tapir]

I see can you share any link or docs

[tight marlin]

this is causing it to convert from static to dynamic

particularly the cookies() part.

it doesnt make sense for a webpage that is designed to render at build time, to read cookies. Whose cookies is it reading from? The use of that will convert the site from statically rendered to dynamically rendered.
you can read more here:
https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering

[exotic tapir]

wdym by that "Whose cookies is it reading from ?"

[tight marlin]

if you build the route at build time, and you call cookie(), whose cookie are you reading it from? there is no user accessing the page

[tight marlin]

https://tanstack.com/query/v4/docs/framework/react/guides/ssr#using-hydrate

[exotic tapir]

ah yes i get it so how do i make it like so it wont call cookie() at build time?

[tight marlin]

remove const nextCookies = cookies()

[exotic tapir]

then how would I get accestoken and call the api ?

[tight marlin]

get accesstoken from where?

[exotic tapir]

from client

[tight marlin]

how?

there is no "client" at build time

[exotic tapir]

i am getting your point but how not to call it build time but when user request i do need it

no?

[tight marlin]

you cant

building the route statically means that it will build the routes regardless of the users, once and store the result in a build cache, like a cdn with all the html, js, css

when user access a statically rendered route, it will directly return htmll, js, and css and run any client-side javascript (like react) to do your app logic

if you want to "get accesstoken" "when user request" in the server, then make a dynamically rendered route.

[exotic tapir]

So If I make server component then that component used in the path will also convert it into dynamic path ?
or it will be just a server component

[tight marlin]

if you make a server component that calls any dynamic features, and that is used in the path, then that path will be opted into dynamic server rendering. yes. that means you will have access to the request object

however,
you want to enforce static rendering at build time, then you can just make the api call in the client.
hit server action from the client, read cookie from server, then make api call

[exotic tapir]

I see. I'll try that.
Thanks alot

But it won't solve our problem

We are just adding another layer of request

[tight marlin]

lets hear your problem

[exotic tapir]

First client then server
in our current we do server thing first then client

[tight marlin]

what is the problem?

[exotic tapir]

The problem is using the server action won't we have to wait more
like we are calling the api after the client is rendered

but we want the data before the client is rendered

[tight marlin]

ya but why are you avoiding dynamic rendering?

what is your goal

[exotic tapir]

There is a lag when navigating between pages

[tight marlin]

then that is another problem

I have answered the reason why your pages goes from static to dynamic

if you have issues with dynamic rendering please open up a new thread