Next.js Discord

Discord Forum

next15 ppr

Unanswered
Egyptian Mau posted this in #help-forum
Open in Discord
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

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>
    </>
  );
};

0 Replies