Everything Know About React Server Side Rendering(SSR)

Server Side Rendering In the realm of web development, there has been a notable emergence of different server-side rendering models, largely influenced by the widespread acceptance of Single Page Applications (SPAs). This article focuses on Streaming react Server Side Rendering (SSR), a rendering approach designed to address certain drawbacks associated with the widely adopted Server-Side Rendering (SSR) pattern.

To gain a deeper understanding of the influence of these rendering methods, we will frequently reference Web Vitals metrics like Time to First Byte (TTFB), Time to Interactive (TTI), First Paint (FPC), and Cumulative Layout Shift (CLS). For a more thorough comprehension of these metrics, you can review them in detail at the following link: https://web.dev/articles/user-centric-performance-metrics

What is React Server Side Rendering (SSR)?

React Server Side Rendering (SSR) is one of the rendering strategies and it is very useful for web developing . SSR stands out as a prevalent rendering approach, involving the initial rendering of web pages on the server prior to transmitting them to the user’s browser. This is distinct from client-side rendering, where the bulk of rendering tasks is managed by the browser itself; instead, SSR carries out the rendering process on the server side.

Let’s Explore how Server Side Rendering (SSR) works:

1. A request is sent from the client to the server.
2. The server crafts HTML content on-the-fly for every client request, demonstrating its capacity to generate new and tailored HTML. This dynamically created HTML is then dispatched to the browser, signifying a key moment in the Time to First Byte (TTFB) phase.
3. After getting the HTML, the browser reads and shows the user interface. Yet, you can’t interact with it just yet because we still need to bring in JavaScript.
4. The browser, after rendering the initial content, sends a request to obtain the required JavaScript bundle and proceeds to download it.
5. The browser then runs the JavaScript code and undergoes a process called hydration, representing a crucial moment in achieving Time to Interactive (TTI).

Several notable advantages come with Server Side Rendering (SSR):

1. Improved Initial Page Load Speed : Server Side Rendering (SSR) facilitates faster initial page loads by generating and sending pre-rendered HTML directly from the server. This minimizes the time users have to wait before seeing content.
2. Enhanced SEO Friendliness : Search engines can easily crawl and index pages that are pre-rendered on the server, contributing to better search engine optimization (SEO) results compared to purely client-side rendered applications.
3. Optimized Performance on Low-Powered Devices : SSR can be advantageous for users on devices with limited processing power, as it reduces the burden on the client-side by performing rendering tasks on the server.
4. Consistent User Experience : Server Side Rendering (SSR) can contribute to a more consistent user experience by delivering a fully rendered page directly from the server, minimizing client-side rendering variations.
5. Graceful Degradation for JavaScript-disabled Users : SSR ensures that users with disabled JavaScript still receive a fully functional and rendered page, offering a more inclusive experience.
6. Easier Debugging and Development : Debugging and development are often simplified with SSR, as it allows developers to identify and address issues more easily during server-side rendering.

While Server-Side Rendering (SSR) comes with various advantages, it’s not without its downsides.

Let’s explore two potential drawbacks associated with SSR:

1. Initial Waiting Time (TTFB) : One challenge is the time users must wait initially before content is displayed, known as Time to First Byte (TTFB). This delay is linked to the time it takes for the server to generate and transmit the initial HTML, potentially impacting the perceived speed of the website.
2. Interactive Delay (TTI) : Another concern is the delay in achieving interactivity, denoted by Time to Interactive (TTI). This delay occurs as the browser needs to execute JavaScript and complete hydration processes, potentially leading to a slower interactive experience for the user.

With the introduction of React 18, a new rendering approach called Streaming SSR has emerged to address the drawbacks associated with Server-Side Rendering (SSR).

What is the Streaming SSR?

Streaming Server Side Rendering is a technique designed to enhance the speed of Time to First Byte (TTFB) and Time to Interactive (TTI) during server-side rendering. It operates on the principle of Node streams, a mechanism that enables the continuous transfer of data in smaller, sequential portions. This method is implemented to optimize the rendering process by delivering content progressively, aiming to achieve more efficient and faster performance.

Streaming SSR does things differently. Instead of making the entire webpage at once, it builds and sends each part separately. It also creates smaller bundles of JavaScript for each piece. These smaller parts, often called “chunks,” are sent piece by piece to your browser. This way, you can start seeing and using parts of the webpage more quickly because they arrive in smaller, faster-to-load bits.

Let’s break down how Streaming SSR looking at each step in detail:

1. A request is sent from the client to the server.
2. The server responds to the browser by providing a method for data transfer utilizing node streams. Alongside this, it sends a fundamental HTML file to the browser. This basic HTML file includes essential data for SEO, ensuring that there are no drawbacks in terms of search engine optimization.
3. Once the client gets the HTML, it processes it just like it does in Server-Side Rendering (SSR). At the same time, the transfer of data using Node streams kicks off.
4. The server sends over the user interface of the fully rendered components, along with the required JavaScript, to the browser in smaller, manageable chunks.
5. The browser processes and activates these chunks, preparing them for use.

One major advantage of this method is that it removes the requirement to wait for the entire content to be generated on the server side. As a result, the Time to First Byte (TTFB) sees a substantial decrease.

Implementing Streaming Server Side Rendering with Next js (Next js 13).

Now that we’ve covered the theoretical aspects, let’s delve into the practical side and discover how to put this innovative pattern into action using Next.js

In Next.js , there have been updates to the way data fetching is handled. With the introduction of default server components, you now have the capability to fetch data directly within a component, eliminating the need for using effect hooks or server-side props like getServerSideProps as in the previous versions.

For example, you can see a Server Side Rendering (SSR) page structure below:

export default async function Page() {

  const productsPromise = getProducts();
  const personsPromise = getPersons();
  const plansPromise = getPlans();

  const [productData, personsData, plansData] = await Promise.allSettled([
    productsPromise,
    personsPromise,
    plansPromise
  ]);

  return (
    <div>
      <Products data={productData} />
      <Persons data={personsData} />
      <Plans data={plansData} />
    </div>
  );
}

So how do we implement streaming SSR in this structure?

1. Component-Specific Data Fetching : Every component is responsible for fetching its own data. The key concept here is to divide the rendering of components, ensuring that each component, along with its data, can be displayed independently. Therefore, we begin breaking down our data requests for each individual component.
2. React Suspense : To enable streaming Server Side Rendering (SSR) for a component, we must enclose it with Suspense. This signals React that the component is ready for rendering in a streaming manner.

Conclusion

In this article, we’ve delved into the interesting concept of Streaming Server-Side Rendering (SSR), a cool new way websites are built and shown on the internet. It’s like discovering a fresh and exciting way to create things on the ever-changing web development scene.

Streaming Server Side Rendering (SSR) is like a superhero for websites because it helps tackle issues we’ve had with the old way of showing websites. It solves problems like making the website appear faster and letting you interact with it sooner. It’s like upgrading our tools to create websites that work even better. And guess what? It’s super exciting!

FAQ