Partial prerendering definition
Partial prerendering is an emerging feature in web development that combines static and dynamic rendering on a route, optimizing web performance.
Partial pre
This approach leverages React's Concurrent APIs and Suspense to manage this selective rendering process. To implement partial prerendering, developers wrap dynamic elements of their route in Suspense. That boundary is the signal Next.js uses to tell static and dynamic components apart, so you do not have to split a route into separate static and dynamic pages yourself.
Partial prerendering is still an opt-in capability rather than default behavior. It is enabled through the framework's experimental configuration, and in the incremental mode you turn it on one route at a time rather than across a whole application. Treat it as a feature you adopt deliberately, route by route, with testing behind each step.
As mentioned, to implement partial prerendering, developers need to wrap dynamic components of their route using Suspense. This allows Next.js to identify which parts are static and which ones are dynamic, without restructuring the route itself.
The magic happens when a user visits your website. Static elements of the page load instantly as they were already generated during build time. Meanwhile, dynamic elements begin rendering only when requested by the user, ensuring optimal performance.
What pushes a component into the dynamic category is its use of request-time information. Reading cookies, headers, or search parameters, or fetching data that is explicitly uncached, marks that subtree as dynamic, and the Suspense fallback above it becomes the hole in the static shell that gets filled at request time.
It's important to note that this approach may involve streaming in chunks of JavaScript that update your site piece-by-piece as data becomes available, much like assembling a puzzle in real-time.
Partial prerendering offers several key advantages. Firstly, it enhances user experience by providing faster load times. Since static elements of a webpage are generated at build time and readily available, users can start interacting with the page immediately.
Secondly, partial prerendering optimizes performance by intelligently managing server resources. By deferring the rendering of dynamic components until required by the user, it helps reduce server load and improve overall site performance.
Thirdly, this technology brings together the best aspects of static generation and server-side rendering. It allows for more fluid websites where static content is delivered instantly while dynamic content can be personalized based on user interaction or other factors. That combination matters most on pages that are mostly the same for everyone but carry a few personalized regions, such as a cart total, a pricing panel, or a logged-in header.
Lastly, partial prerendering has potential SEO benefits as well. Pre-rendered pages are easier for search engines to crawl and index because they're already in HTML format when served to bots.
Implementing partial prerendering in your Next.js application involves two things: enabling the feature in your configuration, and using React's Suspense to mark the dynamic regions. To start, you'll need to identify which parts of your route are dynamic and therefore require delayed rendering. These dynamic components could include any elements that fetch data asynchronously or incorporate user-specific information.
Once these dynamic elements are identified, wrap them using React's <Suspense> component. The Suspense API provides a fallback UI that is displayed while the component waits for its data to load, and once the data is ready, this temporary UI is replaced with the appropriate content. The fallback is what gets baked into the static shell, so it is worth designing rather than leaving as an empty div.
Because adoption is incremental, you also opt individual routes in rather than flipping the whole application at once. Enable the feature in your framework configuration, then mark the specific route segments you want prerendered this way. Everything you have not opted in keeps its existing behavior, which makes it practical to migrate a large site gradually.
This process enables Next.js to differentiate between static and dynamic parts of your route without restructuring your components. It's akin to setting up markers within your code that guide Next.js during build time on what needs to be pre-rendered (static) and what should wait until a user requests it (dynamic).
Partial prerendering pairs naturally with a content backend that can tell your application when something changed. Sanity, the AI Content Operating System, stores content in the Content Lake and exposes publish events through webhooks and the Live Content API, so the static shell of a route can be revalidated when an editor publishes rather than on a fixed timer.
As promising as partial prerendering appears, it comes with tradeoffs worth understanding before you adopt it. The first is that the boundary between static and dynamic is decided by your code, and it is easy to accidentally pull more of a page into the dynamic hole than you intended. A single component reading cookies or headers high in the tree can make a large region request-time rather than prerendered.
Also, there might be complexities involved in determining what parts of your route should be static and dynamic. This process requires a deep understanding of your application's architecture and user behavior to ensure optimal performance.
While partial prerendering leverages React's Suspense for managing dynamic elements, developers must familiarize themselves with this API to effectively utilize it. Implementing Suspense improperly could lead to suboptimal results or even create performance issues, particularly when fallbacks cause visible layout shift as dynamic content streams in.
Another challenge lies in SEO considerations. While partially prerendered pages can potentially enhance SEO due to faster load times and crawlability, if search engines struggle to interpret dynamically rendered components correctly, this could negatively affect search engine rankings.
Explore Sanity
See how Sanity leverages innovative features to enhance web performance and user experience.
Finally, the feature is configured through experimental flags and its behavior has changed across framework releases. Check the documentation for the version you are running, and test each route thoroughly before shipping it.
Last updated: