next15 ppr
Unanswered
Egyptian Mau posted this in #help-forum
Egyptian MauOP
how to use ppr? now i use it and it like streaming it not ppr.
when open page it render static and dynamic component every time
when open page it render static and dynamic component every time
page.tsx
export const experimental_ppr = true;
import { Suspense } from "react";
import { StaticComponent } from "./components/StaticComponent";
import { DynamicComponent } from "./components/DynamicComponent";
export default function Home() {
return (
<>
<StaticComponent />
<Suspense fallback={<h1>Loading...</h1>}>
<DynamicComponent />
</Suspense>
</>
);
}DynamicComponent.tsx
import { cookies, headers } from "next/headers";
export const DynamicComponent = async () => {
await new Promise((resolve) => setTimeout(resolve, 2000));
const time = new Date().toLocaleTimeString();
// use it for dynamic rendering
const header = headers();
console.log("Dynamic Render");
return (
<>
<h1>Dynamic Component: {time}</h1>
</>
);
};StaticComponent.tsx
export const StaticComponent = () => {
const time = new Date().toLocaleTimeString();
console.log("Static Render");
return (
<>
<h1>Static Component: {time}</h1>
</>
);
};