Setup server sent events (SSE) content refetch

ฟีเจอร์นี้ช่วยให้คุณเรนเดอร์หน้าที่เนื้อหามีการเปลี่ยนแปลงใน “แผงผู้ดูแลระบบ” ได้อีกครั้ง

โดยค่าเริ่มต้น หน้าเพจจะให้บริการเป็นเวอร์ชันแบบสแตติก

ใช้เวอร์ชันล่าสุดของเรนเดอร์ของเรา
ฟีเจอร์นี้ใช้ Server-sent events (SSE) เพื่อตรวจจับการเปลี่ยนแปลงของเอนทิตีฐานข้อมูลที่เกี่ยวข้อง

เราจะปรับแก้ไฟล์ layout.tsx ของเรา

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

// ฟังก์ชันที่จะทำงานเมื่อมีการ revalidation
async function revalidate() {
  'use server';
  revalidatePath('/', 'layout'); // คำนวณแคชใหม่สำหรับหน้าเหล่านี้
}

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 // กรอกข้อมูลรับรองให้ถูกต้อง
          websiteId={"..."}
          cmsUrl={"..."}
          apiKey={"..."}
          
        />
        {children}
      </body>
    </html>
  );
}

หลังจากเปลี่ยนเลย์เอาต์รูทของคุณแล้ว คุณสามารถแก้ไขฟิลด์ในฐานข้อมูลและเห็นการอัปเดตสะท้อนหลังจากรีเฟรชหน้าได้

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

import { Refresher } from 'cms-renderer/lib/refresher'; import { revalidatePath } from 'next/cache'; // ฟังก์ชันที่จะทำงานเมื่อมีการ revalidation async function revalidate() { 'use server'; revalidatePath('/', 'layout'); // คำนวณแคชใหม่สำหรับหน้าเหล่านี้ } 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 // กรอกข้อมูลรับรองให้ถูกต้อง websiteId={"..."} cmsUrl={"..."} apiKey={"..."} /> {children} </body> </html> ); }