Next.js Discord

Discord Forum

vercel not caching my page

Unanswered
American black bear posted this in #help-forum
Open in Discord
Avatar
American black bearOP
Hey,

I have a SSR page which fetches some data from my database and displays it on my web page.

I have attempted to use revalidate = 240 to make the cache refresh every 240 seconds. However, after checking the response headers I am getting cache-control: private, no-cache, no-store, max-age=0, must-revalidate back from vercel. What have I done wrong? I am on version"next": "^15.0.1",

export const revalidate = 240;

export default async function Home() {
    const totalApplications = await db.applications.count();

    return (
        <HydrateClient>
            <div className="h-full">
                            <h1>{totalApplications}</h1>
            </div>
        </HydrateClient>
    );
}

9 Replies

Avatar
@B33fb0n3 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
Avatar
American black bearOP
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 🙂
Image
Avatar
American black bearOP
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.
Avatar
American black bearOP
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.
Avatar
@American black bear 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.
Avatar
B33fb0n3
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