When can a route be statically rendered?
Answered
Sloth bear posted this in #help-forum
Sloth bearOP
Newbie question here. With the app router, if my server component does nothing but print the current date, it will get pre-rendered at build time. But apparently [this example](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server-with-an-orm-or-database), which calls some imaginary database library, would prevent the page from being pre-rendered. Why is this? It doesn't call fetch or any of the "dynamic functions" like cookies. I think I'm missing something about what allows a route to be pre-rendered.
Answered by joulev
I… am 99% sure the example is wrong there. I suggest you open a documentation issue ticket on GitHub.
13 Replies
I… am 99% sure the example is wrong there. I suggest you open a documentation issue ticket on GitHub.
Answer
Your understanding is correct. That page would be statically rendered
Sloth bearOP
OK, thank you.....I feel slightly less insane now.
Sloth bearOP
BTW, I reported this, and it seems we may be wrong -- according to them, "any dynamic I/O, like calling await getValueFromDatabase, would make the page run dynamically." I'll post an update if I get any clarification on what that means. @joulev
@Sloth bear BTW, I reported this, and it seems we may be wrong -- according to them, "any dynamic I/O, like calling await getValueFromDatabase, would make the page run dynamically." I'll post an update if I get any clarification on what that means. <@484037068239142956>
I still maintain that they are wrong here. It’s not that hard to reproduce this, you can just make a page like this yourself and it will be static by default. I independently verified this before I told you I was sure they were wrong.
French Angora
Its no brainer that when you have a dynamic function "a function whose response is not known at build time rather at request time", the route would be dynamically rendered.
calling your db and not cached in a route handler would render that route as dynamic.
calling your db and not cached in a route handler would render that route as dynamic.
Sloth bearOP
@French Angora How would this work though? What determines whether the function’s response can be known at build time (other than when it belongs to the short documented list of dynamic functions)? You could call a database query or fetch at build time.
The fact that he mentioned I/O makes me wonder if it’s looking at network calls or something.
French Angora
yes, you could call a db query or fetch at build time, but you may want to do that inside the *generateStaticParams() * function which is a helper for generating slugs for static builds.
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params
Sloth bearOP
I just mean that the compiler wouldn’t have a way to know if you did. So I’m not sure how it’s determining what to mark as dynamic.
@French Angora Its no brainer that when you have a dynamic function "a function whose response is not known at build time rather at request time", the route would be dynamically rendered.
calling your db and not cached in a route handler would render that route as dynamic.
calling your db is not a dynamic function though. the db query can be determined during build time.
dynamic functions are functions that depend on the request object which is not known at build time. list:
* usage of the
*
*
additionally you also have
none of these are present in the code example. and if you just tested the code example in your machine you will find that the code example is just wrong. that is a static page.
dynamic functions are functions that depend on the request object which is not known at build time. list:
* usage of the
searchParams prop*
cookies()*
headers()additionally you also have
unstable_noStore(), export const revalidate = 0 and export const dynamic = 'force-dynamic' to force the page to be dynamic.none of these are present in the code example. and if you just tested the code example in your machine you will find that the code example is just wrong. that is a static page.
Sloth bearOP
discussing it here: https://github.com/vercel/next.js/pull/69548
Sloth bearOP
conclusion: it’s static; they will fix the example