Next.js Discord

Discord Forum

Static Pages with Dynamic Data

Answered
Forest bachac posted this in #help-forum
Open in Discord
Forest bachacOP
I want new user data in the navbar, which is rendered in the layout. (profile picture)

However, I want the page to be statically rendered which is part of this route group. Is this possible?

see: https://stackoverflow.com/questions/77687089/next-js-14-dynamic-layout-with-static-content for the same question but better worded
Answered by Arinji
@Forest bachac what the stack overflow thing wants is called PPR, where a page has both static and dynamic. This isn't currently available in nextjs (it's experimental)

Currently your page can either be entirely static or entirely dynamic.

Static however can have fetch calls which can be revalidated.. it will still be considered static

So make a fetch and give it a revalidate or give it a tag and revalidate
View full answer

40 Replies

Spectacled bear
export const dynamic = "force-static" should make the page static.
And then in the layout, you can either set individual fetches or the entire layout to be dynamic
The export on the page should override the layout.
Forest bachacOP
okay i will test this out
how can i do individual fetch in the layout
Sent a new link. This should direcly answer your question
fetch('https://...', { cache: 'no-store' })
I'm using sanity and for that, i wanted something like this but it did not work, so i used const fetchCache = 'force-no-store'
and this was really bad so i used export const revalidate = 60;
Arinji
@Forest bachac what the stack overflow thing wants is called PPR, where a page has both static and dynamic. This isn't currently available in nextjs (it's experimental)

Currently your page can either be entirely static or entirely dynamic.

Static however can have fetch calls which can be revalidated.. it will still be considered static

So make a fetch and give it a revalidate or give it a tag and revalidate
Answer
@Spectacled bear Sent a new link. This should direcly answer your question
Forest bachacOP
the issue is im using a library not fetching remotely (using prisma orm)
So I think your original answer should work (export const dynamic = force-static)
To make the page static but a dynamic fetch in the layout
@Forest bachac the issue is im using a library not fetching remotely (using prisma orm)
Spectacled bear
Yep, you can do that or use unstable_cache. The first option is the recommended.
Forest bachacOP
Alright ty
Marrk a solution if it helped you.
Forest bachacOP
i will after i test it out
@Spectacled bear Yep, you can do that or use `unstable_cache`. The first option is the recommended.
Forest bachacOP
does force-static work w ssg
@Spectacled bear Yep, you can do that or use `unstable_cache`. The first option is the recommended.
Forest bachacOP
force-static is disabling the fetch in the layout
I may have misunderstood, with force-static I can't make the fetch in the layout
@Forest bachac force-static is disabling the fetch in the layout
Spectacled bear
force-static would go in the page.
Forest bachacOP
Yes I did that
however it makes the layout static aswell
Spectacled bear
now either make the fetch on the layout dynamic or make the entire layout dynamic
@Forest bachac however it makes the layout static aswell
Spectacled bear
layout is static by default.
Forest bachacOP
import Navbar from "@/components/navigation/Navbar";
import { getUserInLayout } from "@/lib/auth/main";

export default async function PublicLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getUserInLayout();

  console.log(user);

  return (
    <>
      <Navbar username={user.profile.preferredName} email={user.email} />
      {children}
    </>
  );
}


export const dynamic = "force-dyanmic" in the layout?
Forest bachacOP
how can i do that if im using a 3rd party library not the built in fetch
csr?
Spectacled bear
You would have to make the entire layout dynamic then
Forest bachacOP
Should I use csr in this scenario
@Forest bachac Should I use csr in this scenario
Spectacled bear
No, not necessary. Simply export export const dynamic = force-dynamic
within the layout