the way i handle auth in navbars is my buttons (i.e. sign out, or the cluster of auth-related buttons) are their own server components, and I wrap these in Suspense

I’m currently doing that now, but my pages are still dynamic

Is that expected and same as you?

yeah that's normal, anything that's outside of those server components are going to be static anyways and it works well for us

But all pages are dynamic (because of the auth component in navbar, for this example) which means every time someone goes to it the server spins up and generates it. Even if the data fetch(s) are cached it still generates the page each time (would be faster I guess).

Compare that to a static generated page approach (like ISR), where the page is just sent back instantly and not generated at request time.

I THINK this is what PPR fixes, but I have no idea and there’s so much experimental and deprecated stuff floating around now it’s hard to know what a “proper” approach even looks like

yeah i see what you mean, I mean for us the performance hit isn't that big of an issue. and yeah, I believe PPR aims to solve this

Yeah performance wise, totally fine on my end too. More the billing and bandwidth costs but I haven’t really seen this out in the wild yet so TBD

we serve a lot of users and don't really have a big issue with billing and dynamic routes

and we're fully on vercel too

Ah ok good to know, I’m likely hyper-optimizing where it’s not really needed but once PPR is stable I’ll probably revisit this

Thanks for your help!

i'm exactly the same haha - but honestly our stuff is so quick in production i'm happy with how it currently works anyways

on our e-commerce store, we manage cart fetches client-side

and that makes the rest static, so it's extremely fast but that was only because RSCs were not around when we built that component

they summed it up quite nicely here:

As a developer, you do not need to choose between static and dynamic rendering as Next.js will automatically choose the best rendering strategy for each route based on the features and APIs used. Instead, you choose when to cache or revalidate specific data, and you may choose to stream parts of your UI.

Yeah that makes sense then, I guess that was what I was thinking but for the auth, but if I can do it on the server I mind as well, but sacrifice the static pages, not 100% sure

i have just found something though, no idea if this has changed/has any truth to it:

someone mentioned having them in nested server components doesn't cause it to opt into dynamic for the entire route

Hmm I want to say that’s outdated but I’d have to check, a nested server component would be like if the page had another server component in it? That feels like an unintentional bug lol

Cause I guess my entire app is dynamic because of the auth state, and that’s not top level page nor layout

yeah so i think they're saying in the case of having:

<Navbar> <Suspense><Auth /></Suspense> </Navbar>

also are you sure you're entire app is dynamic?

i just checked some of our code for a site that does have this exact setup with the navbar in the root layout and it seems quite a few of our pages are static

Yeah, the build output marks every page as dynamic

Interesting, maybe something else is causing this. I’ll check again without the auth there at all

Just stumbled upon this too, seems to be similar situation kinda?

wow, it's not showing the full tailwind classnames

what's the extension name?

and how to see and edit it then?

Tailwind Fold, you can edit it when you click on the classname

Just checked this on my site, removing the auth from header resulted in static pages. So its definitely the auth in my case at least.

🤷‍♂️