Enhancing SSR with React 18: A Deep Dive into Server-Side Rendering Optimization

SSR (Server-side Rendering) Architecture

Server-Side Rendering (SSR) has been a popular technique to improve the performance and SEO of web applications by rendering HTML on the server and sending it to the client. However, the traditional SSR approach has some significant drawbacks, especially as applications grow in complexity.

Is the SSR Approach Optimal? Is it Async?

1. Traditional SSR processes the entire HTML response synchronously:

• This synchronous processing can result in longer server response times, particularly for large applications, which can negatively impact user experience.

Problems with Traditional SSR Today

1. Fetch Everything Before Displaying Anything: The server needs to gather all the data before it can render and send the HTML, leading to delays.
2. Load Everything Before Hydration: All components must be loaded on the client before the application can start to hydrate (i.e., make the HTML interactive).
3. Hydrate Everything Before Interaction: Users cannot interact with the page until the entire hydration process is complete, leading to longer wait times.

App Demonstration with Traditional SSR Approach

About the Application:

The demo application using React and NodeJS server for server side rendering consists of the following components:

1. Cart
2. Header
3. Footer
4. Sidebar
5. Assume that cart component took 2 seconds for data fetching at the server side.

Traditional SSR Metrics:

1. FCP (First Contentful Paint): 2.2 seconds
2. LCP (Largest Contentful Paint): 2.2 seconds
3. Blank Screen Time Frame: The application shows a blank screen until the HTML is fully received from the server.
4. TTFB (Time to First Byte): 2.01 seconds

Problem: These metrics indicate a poor user experience with prolonged blank screens and slow interactions.

Two Major SSR Features Unlocked by Suspense

1. Streaming HTML on the Server

Basics

Streaming HTML on the server involves sending HTML content to the client in chunks as it gets generated, rather than waiting for the entire page to be rendered before sending it. This approach allows users to see and interact with the initial content faster, improving perceived performance and reducing time to first byte (TTFB). Server-side rendering (SSR) with streaming can significantly enhance user experience, especially for large or complex applications.

Benefits of HTML Streaming:

• Faster TTFB (Time-to-First-Byte): Immediate start of content download.
• Faster FCP (First Contentful Paint): Visible content appears sooner, reducing the perceived load time.
• First HTMLShell served to the client using the Suspense fallbacks.

• First HTMLShell served to the client using the Suspense fallbacks.

2. Selective Hydration on the Client

Basics:

• Selective hydration, introduced in React 18, optimizes client-side performance by allowing critical parts of the application to become interactive faster.

Benefits:

• Improved User Experience: Critical components become interactive sooner, leading to a smoother and faster user interaction.

Improvements in React 18 for SSR

1. Suspense and Lazy on the Server Side
2. Streaming HTML with Suspense Boundaries:

• By using the React server API’s renderToPipeableStream, HTML is streamed in chunks with Suspense boundaries, enhancing performance and rendering speed.

Metrics for Demo Application with Suspense and HTML Streaming

1. FCP (First Contentful Paint): 0.3 seconds
2. LCP (Largest Contentful Paint): 0.5 seconds
3. Progressive Rendering: The application progressively renders using HTML streaming from the server.
4. TTFB (Time to First Byte): 30.32 ms

SSR demonstration with Selective Hydration

I have attached few snippet of the selctive interation on the page that how the application remains interactive even when the CARs component is not streamed or the JavaScript is not fully downloaded. This showcases the effectiveness of selective hydration in enhancing user experience by prioritizing the interactivity of critical parts of the application.

Conclusion

By leveraging React 18’s Suspense, React.Lazy and HTML streaming, we can significantly enhance the performance of SSR applications. These improvements result in faster initial loads, quicker interactions, and a far superior user experience. Traditional SSR methods are becoming outdated as new technologies and methods, such as those introduced in React 18, set new standards for web application performance and user satisfaction.

Here is the GitHub link to the demo application showcasing the benefits of SSR with Suspense and HTML Streaming: React SSR Application Demonstration.