Why next js is build my dynamic pages as static?
Unanswered
Bonga shad posted this in #help-forum
Bonga shadOP
I have a page when I want to render list of items that come form DB. This list frequently changes so I need to get fresh request every time I access the page. The page is async and I fetch data server side. I am using app router and next js 14.
Why next js is building this page as static and even when I add new items to db the list remains the same? Should not the be dynamicaly fetched every at each request?
export default async function Page() {
const { data, total_count } = await getItems();
return ..
}Why next js is building this page as static and even when I add new items to db the list remains the same? Should not the be dynamicaly fetched every at each request?
9 Replies
Asiatic Lion
Next.js cache fetch by default
I really don’t like this behavior. Fortunately, this will change in Next.js 15.
I really don’t like this behavior. Fortunately, this will change in Next.js 15.
@Bonga shad I have a page when I want to render list of items that come form DB. This list frequently changes so I need to get fresh request every time I access the page. The page is async and I fetch data server side. I am using app router and next js 14.
`export default async function Page() {
const { data, total_count } = await getItems();
return ..
}`
Why next js is building this page as static and even when I add new items to db the list remains the same? Should not the be dynamicaly fetched every at each request?
pages are statically rendered by default (this is the intended behaviour and unrelated to fetch or nextjs 15).
to switch to dynamic rendering, add
to switch to dynamic rendering, add
export const revalidate = 0Bonga shadOP
@joulev @Asiatic Lion I have managed to fix that by adding no-store option to fetch request OR by setting revalidate = 0. How does it differ then? Is revalidate reffering to the next cache whereas fetch no-store to the fetch/react wrapper cache?
@Bonga shad <@484037068239142956> <@1055820782015623209> I have managed to fix that by adding no-store option to fetch request OR by setting revalidate = 0. How does it differ then? Is revalidate reffering to the next cache whereas fetch no-store to the fetch/react wrapper cache?
revalidate=0 configures the whole page to be dynamically rendered at request time. no-store only configures that fetch to be dynamically rendered at request time.
depending on the use case, one might be better than the other, or the two might have the same behaviour
Bonga shadOP
@joulev that makes sense, thank you for clarifying
astly how export const dynamic = "force-dynamic" differs to the methods mentioned above? Docs say that it also turns the page into dynamically rendered at request time?
@Bonga shad astly how export const dynamic = "force-dynamic" differs to the methods mentioned above? Docs say that it also turns the page into dynamically rendered at request time?
force-dynamic is slightly worse than revalidate=0 because it forces everything to be dynamic. so even if you have a query in the page that you explicitly configure it to be static, that force-dynamic will still override it.
it's sort of like this:
for a particular query, is there an explicit static/dynamic configuration?
if yes, it remains as configured if revalidate=0 is used, while it will become dynamic if force-dynamic is used.
if no, both revalidate=0 and force-dynamic have the same behaviour.
it's sort of like this:
for a particular query, is there an explicit static/dynamic configuration?
if yes, it remains as configured if revalidate=0 is used, while it will become dynamic if force-dynamic is used.
if no, both revalidate=0 and force-dynamic have the same behaviour.
Bonga shadOP
wow, crazy how much control you get with next.js. Thanks for the response