Next.js is always introducing exciting new features to help developers build fast and dynamic web applications. One such experimental feature, available in Next.js 14, is called Partial Prerendering. It has the potential to be a game changer in how we think about rendering pages.
What exactly is Partial Prerendering?
In simple terms, it allows you to pre-render most of a page statically for speed, while still having some dynamic parts that load on demand. This gives you the best of both worlds - the fast initial load of static pages, with the flexibility and freshness of dynamic content.
Before Partial Prerendering, you had to choose whether a route should be entirely static or entirely dynamic. Static meant the whole page was pre-rendered ahead of time. Dynamic meant the whole page was rendered on-demand for each request. But most real-world pages aren't entirely one or the other - they have a mix of static and dynamic content.
For example, imagine a typical e-commerce product page. A lot of it could be pre-rendered and served from a fast CDN:
- • The page layout and design
- • The product title, description, and images
- • The site header, footer, and navigation
But some parts should really be fetched dynamically on each request:
- • The "Add to Cart" button and shopping cart status
- • Personalized product recommendations
- • The current price and stock status
With Partial Prerendering, you can easily split your page into static and dynamic parts. You simply use a Suspense boundary in your React code to wrap the dynamic sections. Next.js will then intelligently serve a static page shell with "holes" where the dynamic content gets streamed in.
From a user's perspective, they first see the fast static shell of the page. Then the personalized and dynamic parts fill in quickly, without blocking the rest of the page. It feels almost instant, even though some content is being dynamically fetched.
Under the hood, Partial Prerendering leverages some advanced capabilities of React and Next.js:
- • React's concurrent rendering allows components to "suspend" while data is loading
- • Next.js' server components architecture allows using React on the server
- • Streaming responses enable sending the static and dynamic parts progressively
But as a developer, you don't need to worry about all those details. The key is simply using Suspense boundaries to control what should be dynamic. The rest happens automatically with zero configuration required.
It's worth noting that Partial Prerendering is still an experimental feature. It's a glimpse into the future of what may become the default way to build pages. But it's not yet recommended for production apps.
If you're curious to learn more, I suggest visiting https://partialprerendering.com.
In my opinion, Partial Prerendering has the potential to revolutionize how we build web apps. It elegantly solves the tension between static and dynamic. While still experimental, it's a taste of an exciting future for Next.js and React.
