{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"With the release of "},{"type":"text","marks":[{"type":"bold"}],"text":"Next.js 14"},{"type":"text","text":", Vercel has introduced an experimental feature that many developers have eagerly awaited: "},{"type":"text","marks":[{"type":"bold"}],"text":"Partial Prerendering"},{"type":"text","text":". This new experimental feature allows developers to prerender parts of a page while leaving other sections to be rendered on-demand, which results in significant performance improvements for complex pages that serve dynamic content."}]},{"type":"paragraph","content":[{"type":"text","text":"This blog post will explore "},{"type":"text","marks":[{"type":"bold"}],"text":"Partial Rendering"},{"type":"text","text":", how it works, and how to leverage this experimental feature to optimize your Next.js applications. If you're already familiar with the common SSR and ISR techniques, you'll find this new approach refreshing, as it unlocks a new level of efficiency and scalability."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"What is Partial Prerendering in Next.js 14?"}]},{"type":"paragraph","content":[{"type":"text","text":"Traditionally, we have to choose the rendering approaches for each page: Server-Side Rendering (SSR) if the page has to load dynamic data or Incremental Static Regeneration (ISG) to generate the page during build time to shorten time to the first byte (TTFB). Of course, Next.js will do it for us in the background automatically. However, in the real world, most pages contain both dynamic data and static data at the same time."}]},{"type":"paragraph","content":[{"type":"text","text":"With "},{"type":"text","marks":[{"type":"bold"}],"text":"Partial Prerendering"},{"type":"text","text":", you can combine these approaches on the same page, allowing you to specify which parts of the page should be statically rendered and dynamically rendered at runtime."}]},{"type":"paragraph","content":[{"type":"text","text":"Next.js 14's "},{"type":"text","marks":[{"type":"bold"}],"text":"Partial Prerendering"},{"type":"text","text":" allows developers to prerender static parts of a page at build time or during revalidation while leaving certain dynamic or frequently changing parts to be rendered at request time. This approach is beneficial when some parts of your page are static and others rely on dynamic or user-specific data that changes frequently."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Key Benefits of Partial Prerendering"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"Optimized Performance"},{"type":"text","text":": You can prioritize the rendering of static content while deferring the more expensive dynamic rendering to runtime, reducing the overall server load."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Improved User Experience"},{"type":"text","text":": By rendering static content upfront, users get immediate feedback while the dynamic parts of the page load progressively in the background, reducing the extra round trip of API requests."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Increased Scalability"},{"type":"text","text":": Partial prerendering reduces server-side rendering overhead, enabling Next.js applications to scale efficiently, especially when dealing with a mix of static and dynamic data."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Fine-Grained Control"},{"type":"text","text":": Developers can now have granular control over which parts of their pages are rendered statically and dynamically."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Use Cases for Partial Prerendering"}]},{"type":"paragraph","content":[{"type":"text","text":"Partial prerendering is particularly useful in applications that have both static and dynamic content, such as:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"E-commerce Sites"},{"type":"text","text":": We can prerender the product descriptions while dynamically rendering prices, stock availability, and discounts."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Blogs or Content Platforms"},{"type":"text","text":": We can prerender the articles, but we can fetch dynamic sections such as comment counts, like buttons, or related articles on demand."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Dashboards"},{"type":"text","text":": We can prerender the layouts and settings while dynamic data like user-specific stats are loaded dynamically."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Implementing Partial Prerendering in Next.js 14"}]},{"type":"paragraph","content":[{"type":"text","text":"Assume we have an e-commerce page that loads the product details and similar products like this:"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"import { SimilarProducts } from \"@/components/similar-products\";\nimport { ProductDetails } from \"@/components/product-details\";\n\nexport default async function PartialPrerenderPage({\n params: { id },\n}: {\n params: { id: string };\n}) {\n return (\n

Without Partial Prerender Page

\n \n \n

\n );\n}"}]},{"type":"paragraph","content":[{"type":"text","text":"Sometimes, the API request for similar products could be personalized and respond slower than the product detail API request. The server component above will need to wait for both API requests before displaying anything to the user, which is not performant."}]},{"type":"paragraph","content":[{"type":"text","text":"Let's enable the partial prerendering feature in our Next.js configuration to leverage partial prerendering. Here's how we can do that:"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Step 1: Enable Partial Prerendering"}]},{"type":"paragraph","content":[{"type":"text","text":"In "},{"type":"text","marks":[{"type":"bold"}],"text":"next.config.js"},{"type":"text","text":", you'll need to enable this experimental feature:"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"type":"text","text":"/** @type {import('next').NextConfig} */\nconst nextConfig = {\n experimental: {\n ppr: true, // Enable partial prerendering to all page components\n },\n // Others configs\n};\n\nexport default nextConfig;"}]},{"type":"paragraph","content":[{"type":"text","text":"This setting will enable all components to opt-in for partial prerendering if applicable. In addition, you may need to upgrade to "},{"type":"text","marks":[{"type":"code"}],"text":"next@canary"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"react@rc"},{"type":"text","text":", and "},{"type":"text","marks":[{"type":"code"}],"text":"react-dom@rc"},{"type":"text","text":". Thus, I recommend branching out before upgrading the dependencies."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Step 2: Define Static and Dynamic Components"}]},{"type":"paragraph","content":[{"type":"text","text":"Next, decide which parts of our page should be rendered statically and which should be dynamic. In our case, we want to render the "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" component as dynamic. All we need to do is wrap the "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" component with React's "},{"type":"text","marks":[{"type":"code"}],"text":"Suspense"},{"type":"text","text":"."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"import { SimilarProducts } from \"@/components/similar-products\";\nimport { ProductDetails } from \"@/components/product-details\";\nimport { Suspense } from \"react\";\n\nexport default async function PartialPrerenderPage({\n params: { id },\n}: {\n params: { id: string };\n}) {\n return (\n

Partial Prerender Page

\n \n {/* Suspense is used to wrap the component that is being loaded dynamically without blocking TTFB */}\n Loading...

}>\n \n \n \n );\n}"}]},{"type":"paragraph","content":[{"type":"text","text":"There are hard rules about what content should be static and dynamic. It all depends on the page content and what you would like to prioritise to show the user first."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Step 3: Verify the build"}]},{"type":"paragraph","content":[{"type":"text","text":"We can run "},{"type":"text","marks":[{"type":"code"}],"text":"next build"},{"type":"text","text":" to verify the result. You should be able to see that your page components have half-solid icons, indicating that they are using a partial prerendering rendering approach."}]},{"type":"figure","attrs":{"src":"https://media.tekminewe.com/Screenshot 2024-09-09 at 11.21_1725877494767.png","alt":null,"title":null},"content":[{"type":"text","text":"Partial prerendering with Next.js"}]},{"type":"paragraph","content":[{"type":"text","text":"Finally, we shall now leave all the magic to Next.js."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Incremental Migration to Partial Prerendering"}]},{"type":"paragraph","content":[{"type":"text","text":"In Next.js 15, we can enable partial prerendering for individual page components rather than all. If we want to use the incremental migration approach, we can change the value of "},{"type":"text","marks":[{"type":"code"}],"text":"experimental.ppr"},{"type":"text","text":" to "},{"type":"text","marks":[{"type":"code"}],"text":"incremental"},{"type":"text","text":" ."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"/** @type {import('next').NextConfig} */\nconst nextConfig = {\n experimental: {\n ppr: 'incremental', // Enable partial prerendering only opted in components\n },\n // Others configs\n};\n\nexport default nextConfig;"}]},{"type":"paragraph","content":[{"type":"text","text":"Next, we can add the following line in the page component to enable partial prerendering."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"import { SimilarProducts } from \"@/components/similar-products\";\nimport { ProductDetails } from \"@/components/product-details\";\nimport { Suspense } from \"react\";\n\nexport const experimental_ppr = true; // Add this line\n\nexport default async function PartialPrerenderPage({\n params: { id },\n}: {\n params: { id: string };\n}) {\n // Component content\n}"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Conclusion"}]},{"type":"paragraph","content":[{"type":"text","text":"The "},{"type":"text","marks":[{"type":"bold"}],"text":"Partial Prerendering"},{"type":"text","text":" feature is a game-changer for developers who want to balance the performance benefits of static rendering with the flexibility of dynamic content. I always like that Next.js constantly pushes for a single framework or paradigm for both backend and frontend development. Hopefully, more features like this will boost the development experience and performance."}]},{"type":"paragraph","content":[{"type":"text","text":"If you wish to understand more about partial prerendering visually, I highly recommend watching this "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://www.youtube.com/watch?v=MTcPrTIBkpA","target":"_blank","rel":"noopener noreferrer","class":null}}],"text":"YouTube video"},{"type":"text","text":"."}]},{"type":"paragraph"}]}

Unlocking Partial Prerendering in Next.js 14: Boosting Performance for Dynamic Pages