Next.js Discord

Discord Forum

ClerkProvider disables caching in React Server Components?

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
I have a root layout layout.js that returns...
  return (
    <ClerkProvider appearance={clerkAppearance}>
      <html lang="en">
        <body className={GeistSans.className}>
          {children}
        </body>
      </html>
    </ClerkProvider>
  )


In my page.js, I have...
import Test from '@/components/common/Test'
export default function Page() {
  return (
    <div>
    <div>Page</div>
    <Test />
    </div>
  )
}


My Test component is a simple React Server component that fetches the time...
async function getCurrentTime() {
  console.log('getCurrentTime')
  try {
    const tstart = Date.now()
    const response = await fetch('http://worldtimeapi.org/api/ip', { next: { tags: ['mytimer'] }});
    console.log('got it...')
    const tend = Date.now()
    if (!response.ok) {
      throw new Error('Failed to fetch the time');
    }
    const data = await response.json();
    return {
      timestamp: data.datetime,
      delta: tend-tstart,
    }; // The datetime field contains the current time
  } catch (error) {
    console.error('Error:', error);
    return null;
  }
}

export default async function Test() {
  const data = await getCurrentTime()
  return (
    <div className="bg-amber-100 p-4">
      <pre>
        {JSON.stringify(data, null, 2)}
      </pre>
    </div>
  )
}


If I comment out ClerkProvider, I can see the time from the fetch is cached until I revalidate the tag (or path). Works as intended. But when I wrap the root layout with ClerkProvider, I lose all ability to cache and the time is fetched on each page refresh.

Anyone come across this or have a way around it?

0 Replies