Setup server sent events (SSE) content refetch

This feature lets you re-render pages whose content changed in the “Admin Panel”.

This feature lets you re-render pages whose content has changed in the “Admin Panel”.

By default, pages are served as static versions.

Using the latest version of our renderer.
This uses Server-Sent Events (SSE) to detect changes to the relevant database entities.

We’ll modify our layout.tsx file.

import { Refresher } from 'cms-renderer/lib/refresher';
import { revalidatePath } from 'next/cache';

// function to run on revalidation
async function revalidate() {
  'use server';
  revalidatePath('/', 'layout'); // recompute cache for these pages
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="min-h-screen bg-bg-base text-text-primary antialiased">
        <Refresher // enter correct credentials
          websiteId={"..."}
          cmsUrl={"..."}
          apiKey={"..."}
          
        />
        {children}
      </body>
    </html>
  );
}

After changing your root layout, you can edit fields in your database and see updates reflected after refreshing the page.

Previous‹Types of Components NextInstall Profound CMS as a proxy›