Next.js Discord

Discord Forum

Confused about Static and Dynamic

Answered
Peterbald posted this in #help-forum
Open in Discord
PeterbaldOP
I'm working with Next.js 13 and finding the caching mechanisms quite challenging to understand.

My project structure includes:
app
  components
    fomo.tsx (contains an asynchronous function)
    navbar.tsx (contains an asynchronous function                   that relies on cookies)
    promo.tsx (contains an asynchronous function)
  layout.tsx (integrates `navbar.tsx` at the top)
  page.tsx (comprises various sections and       includes `promo.tsx`)


My goal is to have layout.tsx, page.tsx, and navbar.tsx function dynamically, while promo.tsx and fomo.tsx should be static. Ideally, in the future, I'd like everything to be static, with the exception of fomo.tsx and navbar.tsx, once Next.js 14's Partial Prerendering is stable and reliable. However, several sections in page.tsx currently contain static data.

How should I define the exports in these files? Should I use "export const dynamic = 'force-dynamic'" for layout.tsx and page.tsx, and "export const dynamic = 'force-static'" for fomo.tsx and promo.tsx?
Answered by B33fb0n3
If you surround with a Suspense then the others will not be dynamic
View full answer

6 Replies

B33fb0n3
You can do it like you already said:
How should I define the exports in these files? Should I use "export const dynamic = 'force-dynamic'" for layout.tsx and page.tsx, and "export const dynamic = 'force-static'" for fomo.tsx and promo.tsx?
Siberian Flycatcher
Hi 👋

If you rely on cookies() in a server component (navbar) and put this component into your main layout, all your pages will opt into a dynamic rendering at request time.
However, even if your page uses dynamic rendering, all fetch requests will still get cached individually.
This example might be helpful https://twitter.com/asidorenko_/status/1697580873288183918
B33fb0n3
If you surround with a Suspense then the others will not be dynamic
Answer
PeterbaldOP
Wow! Thanks