Using Partial Prerendering in NextJS
Introduction Partial Prerendering (PPR) is the optimal combination of Static Site Generation (SSG) and Dynamic Rendering (SSR) within a single route. Previously, a website usually had to choose one of two: either fully static (fast but not personalized) or fully dynamic (slower because of waiting for server processing). With PPR: Static Shell: Parts like Header, Sidebar or the frame (Skeleton) are pre-rendered into static HTML files and sent immediately to the user. Dynamic Islands: Parts that need actual data (like shopping carts or user info) are pre-rendered on the UI using React Suspense. The server will stream these parts down once the data is ready. Outstanding Advantages Instant response speed: Users see page content almost immediately (static shell) instead of looking at a white screen waiting for the server. Optimize user experience: Minimize Layout Shift (jumping content) by pre-defining fallbacks (like Skeleton) in Suspense. Detail In this article, I will guide you through a...