I’m trying to understand how Next.js implements its new partial pre-rendering (PPR) technology, specifically how it pre-renders just the shell of a React component tree.

In this article, the Next.js team states:

“… Next.js will pre-render a static shell for each page of your application, leaving holes for the dynamic content.”

From what I understand, there should be three stages in this process:

1. Pre-render the static shell during the build.
2. Render to a stream the content at request time.
3. The client shows the static content sent by the server with low latency and in the background hydrates it with the dynamic content streamed by the server.

This is what already happens in a normal react server side rendered application, with in addition the pre-render step.

So looked into the React 19-beta documentation, which introduces support for stable Server Components, and here’s what i found:

1. renderToPipeableStream: This function generates a stream of the React component’s HTML. It is suitable for server-side rendering (SSR) but does not support caching of pre-rendered content as it produces a stream.
2. renderToString: This function generates a string result of the HTML, which can be cached, but as the docs state, does not support streaming or waiting for data.

Note that these functions are also present in older versions of React.

Can someone explain how Next.js 14 utilizes these (or other) functionalities to achieve partial pre-rendering? Is this a feature of React itself, or is it specific to Next.js technology?