Always invalidating cache using fetch in NextJs

[maiconsanson]

Bug Description

After enabling fetch logs in the next.config, I noticed that the cached result from API calls using the extended native fetch is always invalidated with the message: Cache skipped reason: (cache-control: no-cache (hard refresh)) when fetching any API endpoint from a page.

I'm using "next": "15.0.3" with the app folder and followed the PostHog documentation on using the client.

The result is always fresh when hitting the same endpoint multiple times:

However, it should be the cached result:

How to reproduce

1. Enable the fetch logs in the next.config.

const nextConfig = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

2. Follow the app router docs (client version).
3. Make a request from a page to an API endpoint using the native fetch (setting a cache time).

Additional context

1. With the server-side configuration using the posthog-node package, the problem doesn't occur, but it's not possible to use session replays.
2. The pages are server-side rendered, and I'm using the client provider to wrap them. Could that be the problem?
3. My layout is a server component, so I can't import the PostHogPageView using dynamic with ssr: false as stated in the documentation:

// Layout: without dynamic importing of PostHogPageView

import { PostHogClientProvider } from '@src/app/providers'

// irrelevant code

 <PostHogClientProvider isProduction={isProduction}>
  <Suspense fallback={null}>
    <PostHogPageView />
  </Suspense>
  {children}
</PostHogClientProvider>

4. Even when importing the PostHogPageView dynamically inside the provider, the behavior remains the same:

// Provider: with dynamic importing of PostHogPageView

'use client'

import { useEffect } from 'react'
import dynamic from 'next/dynamic'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
const PostHogPageView = dynamic(() => import('@components/PostHogPageView'), {
  ssr: false,
})

const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY
const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST

export default function PostHogClientProvider({ children, isProduction }) {
  useEffect(() => {
    if (isProduction) {
      posthog.init(POSTHOG_KEY, {
        api_host: POSTHOG_HOST,
        person_profiles: 'identified_only', 
        capture_pageview: false,
        capture_pageleave: true,
      })
    }
  }, [])

  return isProduction ? (
    <PostHogProvider client={posthog}>
      <PostHogPageView />
      {children}
    </PostHogProvider>
  ) : (
    children
  )
}