NextJS 14 App Router, cache dynamic ...slug pages with revalidate, but cache miss

[rnnyrk]

I have a setup using NextJS 14 App Router with Storyblok CMS to fetch content. Therefore I do not have any particular folder structure setup, but instead use the following setup:

- app
  - layout.tsx (export const revalidate = 3600)
  - /[site]/[locale]
    - layout.tsx (export const revalidate = 3600)
    - [[...slug]]
      - page.tsx (export const revalidate = 3600)

The [[...slug]]/page.tsx look like this:

export default async function GeneralSlugPage({
  params: { site, locale, slug },
}: GeneralSlugPageProps) {
  const { header, footer } = await getLayout(site, locale);
  const page = await getBySlug(site, slug ? slug.join("/") : "/", locale);

  const component = page.content.component;
  const DynamicTemplate = lazy(
    () => import(`@web/features/templates/${component}Template.tsx`)
  );

  return (
    <Suspense fallback={<Loader />}>
      <DynamicTemplate
        _uid={page.content._uid}
        content={page.content}
        {...{ footer, header, locale, page }
      />
    </Suspense>
  );
}

The calls to Storyblok are cached as well via React.cache:

export const getLayout = cache(
  async (site: string, locale: string): Promise<{
    header: HeaderStoryblok;
    footer: FooterStoryblok;
  }> => {
    ...
  }
);

export const getBySlug = cache(
  async <T = Record<string, any>>(site: string, slug: string, locale: string, params?: ISbStoriesParams): Promise<StoryblokStory<T>> => {
    ...
  }
);

Therefore I expect the pages to be cached. Although when I look in Vercel I only cached content being missed.

What am I missing or misunderstanding?

Also posted on: https://stackoverflow.com/questions/78759958/nextjs-14-app-router-cache-dynamic-slug-pages-with-revalidate-but-cache-mis