Page-level vs function-level vs component-level caching, how does Next.js handle rendering?

[yusifaliyevpro]

Hi! I have a page where all parts are static except one data-fetching function, getProjects(). Projects don't update often, so I want to apply caching. But I'm unsure about the right level to cache at, and I have a few questions.

Current setup:

page.tsx

export default async function Home() {
  const projects = await getProjects();
  return (...)
}

projects.tsx (Server Component, receives data as prop)

export function Projects({ projects }: { projects: ProjectsQueryResult }) {
  return (...)
}

getProjects.ts

export async function getProjects() {
  "use cache";
  cacheLife("hours");
  // fetch from Sanity
}

My questions:

1. When getProjects() has "use cache" but the page itself doesn't — does Next.js still re-render the page on every request (just using the cached data), or does the page output get cached too?

2. If I move the getProjects() call into the Projects component itself instead of calling it in the page and passing it down as a prop, will the page still re-render on every request with the same cached data?

3. What's the right level to cache at if I want the entire page to be static and only regenerate once per hour — page level, component level, or function level?

Thanks!

[Nickalus12]

In Next.js with the App Router, the "level" of caching determines what work is saved. Since you are using the "use cache" directive (introduced in the Canary and experimental versions), here is how the rendering behavior changes based on your setup.

1. Function-level Caching vs. Page Rendering

If you use "use cache" inside getProjects(), Next.js caches the result of that specific function.

• Behavior: During a request, Next.js still "runs" the Home() page component. However, when it reaches await getProjects(), it retrieves the data from the cache instead of hitting Sanity.
• Result: The page is considered Dynamic (rendered at request time) but it executes very fast because the data fetching is skipped. The HTML output of the page itself is not cached in the CDN/Data Cache unless the entire route is static.

2. Moving the call to the Component level

Moving the call into the Projects component allows for Request Waterfalls or Streaming, but it doesn't automatically make the page static.

• If Projects is a Server Component and uses "use cache", the output of that component is cached.
• If the rest of the page contains dynamic functions (like cookies() or headers()), the page remains dynamic.
• If the rest of the page is static, Next.js will attempt to prerender the page at build time.

3. Achieving a fully Static Page

To make the entire page static and regenerate every hour, you should apply the caching at the entry point or ensure the route satisfies the requirements for Static Site Generation (SSG).

Strategy	Implementation	Effect
Route Level	export const revalidate = 3600	The entire HTML output is cached for 1 hour.
Component Level	"use cache" inside <Projects />	The component's rendered output (JSX) is cached.
Function Level	"use cache" inside getProjects()	Only the raw data from Sanity is cached.

Tip

For the best performance, apply "use cache" at the Component level (the Projects component). This caches the rendered JSX, meaning Next.js doesn't even have to perform the React rendering logic for that section of the page; it just serves the cached fragment.

If you want the whole page to be a static shell that updates every hour, use the segment config at the top of page.tsx:

// page.tsx
export const revalidate = 3600; // Revalidate the whole page every hour

export default async function Home() {
  const projects = await getProjects();
  return <Projects projects={projects} />
}

Does your page rely on any dynamic functions like searchParams or cookies that might be forcing it into dynamic rendering?

[icyJoseph]

The way to think about this with Cache Components, is that pages are no longer either static or dynamic, they can be both.

If a page is not accessing dynamic data (fetch, remote db queries, async file system reads), runtime data (cookies, searchParams, etc), or non-deterministic operations (Math.random or Date access), then it will complete its rendering, and be a fully static page. You wouldn't need to add a caching directive at all.

This is the static shell, the static output (contribution) for this page, and in the case above, it is the entire page. This would page have zero fallbacks for dynamic content, (it contributes with zero dynamic content).

The so called dynamic data, may be cached, given some conditions, the framework shows helpful errors if you are not meeting these conditions but essentially, don't access runtime data, under a cached scope, read it outside and pass it as a function input. Don't read cookies as part of a cached function, directly or indirectly.

When dynamic data is cached, it can be included into the static shell/output. And it is given a cacheLife (implicitly 'default'). This sets the conditions for when the cached function will be executed again, in this case, that'll also update the static output. A very sort cacheLife, zero revalidate or expire under 5 minutes, is excluded from the static shell.

Anyway, to keep things short, in your case, an otherwise static page, with a fetch getProjects, can safely cache the fetcher only. This will generate a static page, that'll be revalidated, or expired, as given by the cacheLife profile used. Where to put the cache function is up to you, you might find it easier to keep directives and such closer to Next.js primitives (layout/page files), or prefer to isolate this to the fetching operations.

• https://nextjs.org/docs/app/api-reference/functions/cacheLife
• https://nextjs.org/docs/app/getting-started/caching#putting-it-all-together

[yusifaliyevpro]

Thanks for answer. So if i move the fetching to component, page will not have any dynamic part and it will not be async so it will be rendered statically, and Product component will be cached for 1 hour (component level caching)

[yusifaliyevpro]

Hi @icyJoseph, can I use use cache with cacheLife("hours") for opengraph-image.tsx files?