Partial Prerendering vs React's use API

[mtlaso]

Summary

From what I understand, PPR gives you the ability to combine static and dynamic content in the same route. However, there's also React's use which can be used to stream data from the server to the client. How do they interact with one another?

If you look at the example in the PPR docs, couldn't this:

import { Suspense } from 'react'
import { User, AvatarSkeleton } from './user'
 
export const experimental_ppr = true
 
export default function Page() {
  return (
    <section>
      <h1>This will be prerendered</h1>
      <Suspense fallback={<AvatarSkeleton />}>
        <User />
      </Suspense>
    </section>
  )
}

be rewritten to this (using React's use)?

export const experimental_ppr = true
 
export default function Page() {
  const session = (cookies()).get('session')?.value

  return (
    <section>
      <h1>My example with React's `use` API</h1>
      <Suspense fallback={<AvatarSkeleton />}>
        <User sessionPromise={session} />
      </Suspense>
    </section>
  )
}


// "use client"
function User(sessionPromise) {
  const session = use(sessionPromise)
  return '...'
}

Additional information

No response

Example

No response

[victormoni]

Hi @mtlaso

PPR vs React's use API

PPR (Partial Prerendering) in Next.js allows you to combine static and dynamic content in the same route, improving performance and SEO.
The React 19 use API lets you consume Promises directly inside a component, simplifying data loading with Suspense.

The example shown in the post can be rewritten to use the use API like this:

import { Suspense, use } from 'react'
import { cookies } from 'next/headers'
import { AvatarSkeleton } from './user'

export const experimental_ppr = true

export default function Page() {
  const session = cookies().get('session')?.value

  return (
    <section>
      <h1>My example with React's `use` API</h1>
      <Suspense fallback={<AvatarSkeleton />}>
        <User sessionPromise={session} />
      </Suspense>
    </section>
  )
}

// "use client"
function User(sessionPromise) {
  const session = use(sessionPromise)
  return <div>{session}</div>
}

Summary:

• PPR - mixes static/dynamic content, rendering part at build time and part on demand.
• use API - declaratively consumes Promises, simplifying Suspense usage.

References

• Next.js Partial Prerendering Docs
• React use API RFC
• React Suspense Docs

[icyJoseph]

Hi,

The key bit in your example is that, without PPR, every time Page is hit - you'd need to render the entire top-down tree.

You can think of PPR as an enhancement that at build time, knows how to carve out the static shell, the bits that don't depend on the cookie, or dynamic behavior. The static shell boundary ends at the Suspense boundary.

So with PPR on, at build time the shell is calculated and extracted, and then on every new request, or when prefetching a page, the shell can be reused, and then we only need to collect the dynamic bit, and in your case, that'd get streamed to the client interactive javascript, rather than waiting for the whole thing to render server side, or being streamed into RSC slots in the client.

[mtlaso]

Thank you for you reply. When you say:

that'd get streamed to the client interactive javascript, rather than waiting for the whole thing to render server side, or being streamed into RSC slots in the client.

Are you referring to React's use API?

[icyJoseph]

Yeah ~ use has this nice pattern from the react docs, https://react.dev/reference/react/use#streaming-data-from-server-to-client

using await in a Server Component will block its rendering until the await statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component.