when using revalidate the page will be cached inside the full route cache. That means, that it's cached on the server, shared with other users and can be revalidated.

And here is the key point: it's cache on the server. What you seeing there "cache-control: private, no-cache..." are the instructions for the browser. But we don't use the browser cache here. We using the full route cache here

hmm, thanks. i thought this was vercel telling me that the page was not cached. Thank you.

Is there a way for me to check if my "revalidate = 240" is working? I need to be careful that I'm not making these requests every time a user visits my page as it will blow up my database 😄

oh wait, i think this icon "edge cache" means it is being cached! thank you for the response b33 🙂

damn! there is one problem though, if im caching this route it doesn't fetch the users session on each render, that is a slight problem. Surely there is a way to only cache the server sided logic?

so im using export const revalidate = 240; in my page.tsx and then I have a layout.tsx in the same directory (public)

export default function Layout({ children }: { children: React.ReactNode }) {
    return (
        <main className="flex min-h-screen flex-col xl:p-0">
            <PublicNavBar />
            {children}
            <PublicFooter />
        </main>
    );
}

And inside of <PublicNavBar> I fetch the session nextauth session await auth().

I do not have any cache defined for "Layout", but im guessing because of the cache i defined for the page it uses that instead? which isn't ideal.

it appears that I could potentially move my fetching session logic onto the client, using the useSession hook, but this isn't "ideal" since that causes loading states flickers, which im trying to avoid.

if you fetch your page and take a look at the network tab, you can see, if you hit the server cache or not (see attached - in the headers)

yea, as it's a server side cache and every user get's the same response, it could be a potential security issue... so make sure to load the serverside page either without cache (fully dynamic) or use a client component that hopefully trigger some suspense boundary or have a loading state, so you can show something beautiful

Brilliant, thanks for the response.

Ideally I was hoping to continue to use auth() to fetch the session server side, I did notice that it was causing weird issues with my navbar, as you mention it does seem like it could have opened up some security issues.

Is it not possible to force different SSR rendered components into caching?

for example, i would love if <PublicNavBar/> was never cached (force static?), but Home was always cached (revalidate = 240), as an example.

If not, i'll switch to using cache for the Home page but start using the useSession hook to move the navbar logic onto the client.

You can’t choose the rendering strategy per component level per se (you can kinda implement patterns to keep as much static and only make dynamic the very specific components/pages that need to be with stuff like PartialPrerendering and <Suspense>)

If you want a page to “never be cached” you need to mark that page individually or having it under a dynamic segment.

For page level configuration you need to export const dynamic = “force-dynamic” or make use of a dynamic API such as cookies, headers, params, searchParams

If you want the page to be static but be able to refresh after certain time what you need is export const revalidate = 240

As long as you keep your auth out of layout.tsx and do checks either in middleware or per page you’re good

Amazing, thanks guys!

going to try and get this implemented today.

@American black bear keep us updated

Thank you! I've got it all working by doing the following:

page.tsx

export const revalidate = 600;

export default async function Home() {
  await expensiveDbQuery...
  return (...)
}

layout.tsx: no caching and <PublicNavBar/> is a client component which uses useSession to fetch the client info.

export default function Layout({ children }: { children: React.ReactNode }) {
    return (
        <main className="flex min-h-screen flex-col xl:p-0">
            <PublicNavBar />
            {children}
            <PublicFooter />
        </main>
    );
}

great! Please mark solution[:](https://cdn.discordapp.com/attachments/1043615796787683408/1117191182133501962/image.png?ex=67bed31e&is=67bd819e&hm=672921d4a63b6c7a0d31c79e092471c5d4d5261a34546bab3f453cf096d96bdd&)