Next 15 with Partial Prerendering (PPR) and dynamic APIs - Problems

[TechedLemur]

Summary

Hi!

I am trying out Next 15.0.4-canary.20 with experimental ppr enabled. I am getting some unexpected behavior when using dynamic APIs like searchParams. I am passing the searchParams to a separate component within a Suspense boundary, as the docs explain.

I have a simple page where I have included timestamps to see when the component is rendered, as well as console logs.
When running the build, i see that the page is marked as "Partial Prerender", which is correct.

Running in production mode and navigating to the page (or just refreshing), I still see all the console logs being run on the server. I though only the component within suspense would run, and the rest be served statically from the cache?

I do however see that the initial response from the server is html that contains the original build timestamp and the loading states. But, as soon as the dynamic parts are streaming in, also the first timestamp changes to the current timestamp and I get a hydration error in the console(?!). I thought hydration errors only occurred in client components? Is PPR also making the code run on the client, or is it something specific with new Date() that makes it behave like this? I want to keep the original timestamp to show that we are using cached prerendered html.

In summary, these are my questions:

• Why am I seeing all the console logs on every request? (indicating all the code is running, instead of just using cached html)
• Why am I getting the hydration error on a page with no client components?

Here is the code for the example:

import React, { Suspense } from "react";

export const experimental_ppr = true;

export default function page(props: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  console.log("rendering search-params page");

  return (
    <div className="items-center justify-items-center gap-16 p-8 pb-20 sm:p-20">
      <ExampleComponent />
      <Timestamp />
      <Suspense fallback={<div>Loading...</div>}>
        <ParamComponent searchParams={props.searchParams} />
      </Suspense>
    </div>
  );
}

const ExampleComponent = () => {
  console.log("rendering example component");
  return <div>ExampleComponent</div>;
};

async function ParamComponent(props: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const searchParams = await props.searchParams;
  console.log("rendering param component");
  return (
    <div>
      Dynamic Component
      <Timestamp />
      {searchParams && searchParams["test"]}
    </div>
  );
}

function Timestamp() {
  const timestamp = new Date().toLocaleString();
  return <div>Rendered at {timestamp}</div>;
}

https://react.dev/errors/418?args[]=