How to revalidate layout after time
Unanswered
Harlequin posted this in #help-forum
HarlequinOP
import { draftMode } from 'next/headers'
import '../globals.css'
import { LivePreviewListener } from '../../components/live-preview-listener'
import { Navbar } from '../../payload/globals/navbar/navbar'
import { Roboto } from 'next/font/google'
import Footer from '../../payload/globals/footer/footer'
import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { unstable_cache } from 'next/cache'
const roboto = Roboto({
subsets: ['latin'],
weight: ['400', '700'],
})
// Cache the global data fetching with just time-based revalidation
const getGlobalData = unstable_cache(
async () => {
const payload = await getPayload({ config: configPromise })
// Fetch all data in parallel for better performance
const [navbarConfig, footerConfig, allProducts, allRecipes] = await Promise.all([
payload.findGlobal({ slug: 'navbar' }),
payload.findGlobal({ slug: 'footer' }),
payload.find({ collection: 'products', limit: 900 }),
payload.find({ collection: 'recipes', limit: 900 }),
])
return {
navbarConfig,
footerConfig,
allProducts,
allRecipes,
}
},
['global-layout-data'],
{
revalidate: 60, // Revalidate every hour
},
)
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const { navbarConfig, footerConfig, allProducts, allRecipes } = await getGlobalData()
return (
<html lang="en" className={roboto.className}>
<body>
<LivePreviewListener />
{/* Layout UI */}
<main>
<Navbar navbarConfig={navbarConfig} products={allProducts} recipes={allRecipes} />
{children}
<Footer footerConfig={footerConfig} />
</main>
</body>
</html>
)
}