Wix improved their React application's Interaction to Next Paint (INP) by 40% and reduced JavaScript payloads by 20% using selective hydration with React 18's Suspense API. Instead of hydrating all server-rendered components immediately, they defer hydration until components enter the viewport using Intersection Observers and
•14m read time• From wix.engineering
Table of contents
IntroductionThe Challenge of HydrationCould We Keep SSR Without Paying the Hydration Tax?Enter Suspense: From Lazy Loading to Selective HydrationSelective Hydration in PracticeThe Impact: Less JS, Faster InteractionWhy Not Just Use Server Components?Looking Ahead: React 19 and BeyondKey Considerations for Effective Selective HydrationWhat’s Next: Taking Selective Hydration Even FurtherThe TakeawaySort: