speed, convenience and cost.
Hydrogen is specifically designed and optimized to provide customers with personalized, contextual, and dynamic commerce experiences. High-performance storefront data access that enables speedy server-side rendering is essential for this purpose. To ensure optimum user experience, we employ a variety of strategies working in synchronization.
This application uses React’s Suspense to provide a quick first render experience through streaming server-side rendering.
- React Server Components provide efficient post-render updates for individual components, creating an optimised system.
- A range of primitives is included which both fetch and store data, with intelligent default caches.
- Flexible page and subrequest caching can be used to enable modern, efficient delivery from the edge.
- Let’s dig deeper into these issues to gain a better understanding.
Streaming Server-side Rendering
For example, a product page may display content tailored to an individual buyer, such as localized product descriptions and pricing, recommendations based on purchase and browsing history, a customized CTA or promotional banner, and a multivariate A/B test allocation.
Client-side approaches can result in a speedy display of a blank product page skeleton, but numerous browser-initiated requests would be necessary to obtain and render the content.
Streaming SSR solves this problem by streaming the HTML for a page to the browser as it is generated on the server. By doing so, the browser can begin rendering the page before the entire HTML is generated, resulting in a faster loading time and a better user experience.
In web applications that require dynamic content or personalized experiences, streaming SSR is a powerful technique that can improve performance and user experience.
Streaming SSR offers the following benefits:
- As the browser can start rendering the page before the entire HTML has been generated, Streaming SSR can significantly reduce loading times.
- A better user experience: By reducing the amount of time users have to wait for pages to load, streaming SSR can provide a better user experience.
- A streamed SSR can improve SEO by making pages more search engine-friendly.
The client-side rendering (CSR) approach usually causes a noticeable delay with crucial page content—in other words, slow LCP. As a viable solution, server-side rendering (SSR) can be used instead—fetching the data on the server and including it in the response—which helps reduce RTTs and quickens both first and largest contentful paints. The downside of this strategy is a sluggish time-to-first-byte (TTFB) because the server becomes stuck on data retrieval. This scenario is exactly where streaming SSR optimization comes in handy.
Fast TTFB prevents the browser from having to wait for server-side data fetching to complete before displaying the HTML page shell. Compared to conventional SSR, where the browser is blocked until all required queries are processed.
Server-side data fetches are resolved and streamed within the HTML response, and React progressively hydrates the components’ state without client round trips or hindering rendering of the entire component tree. This enables individual components to demonstrate personalised loading states while the page is being streamed and built by the browser.
The streaming and progressive hydration and rendering of an application ensures quick TTFB, while putting an end to the client-side waterfall associated with CSR—making it a great solution for dynamic, high-performance eCommerce.