Rendering a React app with server-side rendering (SSR) can feel bittersweet - on one hand, SSR ensures fast page load and great SEO by rendering the entire page on the server, however the client must download and hydrate all these components to make the page interactive. For pages with lots of content, this can lead to a significant amount of JavaScript being loaded and executed, causing slower interaction times and major performance issues.
At Wix, we faced a significant challenge: how could we deliver blazing-fast interaction times while avoiding the performance bottleneck of downloading and hydrating every SSR-rendered component on the client? For a long time, this felt like an unsolvable problem - until the new Suspense API changed the game.
In this talk, I’ll share the story of how we tackled this problem head-on, leveraging the new Suspense API introduced in React 18 to dynamically load and hydrate React components only when they enter the viewport. While Suspense's promise-based rendering capabilities aren’t widely documented, they proved to be the game-changing tool we needed to break free from the limitations of traditional hydration and improve the performance of millions Wix websites.
Prepare for a technical deep dive with lots of code examples that will equip you to tackle hydration challenges and boost React performance!
This talk has been presented at React Summit US 2025, check out the latest edition of this React Conference.
