Partial Prerendering combines a fast static page shell with dynamic content streamed in afterward. In the product demo, recommended products, availability, and reviews arrive dynamically while the rest of the page loads quickly.
Partial Prerendering in Next.js 14
leerob, a Next.js and Vercel developer, explains Partial Prerendering in Next.js 14 through a product page demo and his blog; no other speakers are identified.
The first demo waits for every data fetch, including reviews that take two seconds. Wrapping slow or user-specific components, such as reviews, the cart count, and pricing details, in Suspense lets the page show fallbacks while that content loads.
Client-side fetching can add JavaScript and network waterfalls, while traditional server rendering can make the whole page wait for its slowest fetch. Edge rendering still requires compute and can add distance between the edge and the database. PPR aims to serve static content quickly and stream dynamic parts as they finish.
With the experimental feature flag enabled, developers use Suspense boundaries to decide which parts can be prerendered and which need dynamic rendering. On leerob's blog, a view counter reads from a database; using `noStore` lets that component render dynamically while the rest of the page remains partially prerendered.
The feature was available on the Next.js canary release, but leerob cautioned that it was not ready for production. He described it as built on infrastructure that other frameworks, including Astro, Nuxt, SvelteKit, and Remix, also use.
Takeaways
- Use Suspense boundaries to keep slow data fetches from blocking the whole page.
- Keep content static where possible and isolate user-specific or frequently changing data in dynamic components.
- A static shell can load while the server works on dynamic content in parallel.
- At the time of the talk, Partial Prerendering was experimental and not recommended for production.
Mentioned in this talk
Search inside this talk
What was claimed 7
- feature
Next.js: Experimental rendering feature combining static delivery with dynamic streaming; available in canary behind a feature flagExperimental rendering feature combining static delivery with dynamic streaming; available in canary behind a feature flag“It allows you to have the best parts of both static and dynamic rendering on the same page with no new APIs.”
YouTube Unverified1 source· Talk
- usesSuspense boundaries define which page sections are dynamic and streamed
“just your Suspense boundaries”
YouTube Unverified1 source· Talk
- usesThe talk says the framework API is built on infrastructure developed at Vercel
“Vercel is an amazing platform, and it's arguably the best place to deploy your Next.js projects”
6:42inWhy I’m Using Next.js in 2020YouTube Verified3 sources· Talk
- usesThe talk says both frameworks use the same build output API
“Astro, Nuxt, SvelteKit, and Remix all use the same build output API, or framework API, that Next.js uses as well.”
YouTube Unverified1 source· Talk
- usesThe talk says both frameworks use the same build output API
“Astro, Nuxt, SvelteKit, and Remix all use the same build output API, or framework API, that Next.js uses as well.”
YouTube Unverified1 source· Talk
- usesThe talk says both frameworks use the same build output API
“Astro, Nuxt, SvelteKit, and Remix all use the same build output API, or framework API, that Next.js uses as well.”
YouTube Unverified1 source· Talk
- usesThe talk says both frameworks use the same build output API
“Astro, Nuxt, SvelteKit, and Remix all use the same build output API, or framework API, that Next.js uses as well.”
YouTube Unverified1 source· Talk
