From SSR to RSC: The Next Frontier of React Rendering

React is a famous JavaScript library for ceating user interfaces. It excels at efficiently rendering components and elements while providing a seamless experience for developers and users alike. Let's dive into how React rendering and components work, and explore its core concepts.

At the heart of React lies the rendering process. When you create a React app, you define a component hierarchy, where each component represents a piece of the user interface. A React component is a standalone piece of code that controls its own rendering and state.  Components can be functional components, which are simple and stateless, or class components, which have additional features.

React rendering revolves around creating and updating React elements. A React element is a lightweight representation of a DOM element, and it describes what should be displayed on the screen. These elements are created using JSX, a syntax extension that looks like HTML but is transpiled to JavaScript.

When a React app starts, the root component is mounted, initiating the initial render. This initial render creates the entire app's component tree. React creates a virtual DOM to efficiently manage the rendering process. The virtual DOM, which allows React to do the bare minimum of actions during re-renders, is a thin replica of the actual HTML DOM elements.

During a re-render, React compares the previous virtual DOM with the latest rendering output. It then calculates the most efficient way to update the actual DOM to match the new virtual DOM. This process minimizes direct manipulations of the actual DOM, leading to improved performance.

React's re-rendering process is triggered by changes in a component's state or props. When a component's state or props change, it re-renders all potentially affected components. React ensures that only the necessary components and their child elements are updated, optimizing the performance and responsiveness of the application.

To create a basic React app, you typically start by importing React and defining your app component. This app component is the root of your application's component hierarchy and represents the user interface. You then use the `render` method from the React DOM library to render the app component into the actual HTML DOM elements in the browser.

1     import React from 'react';
2    import ReactDOM from 'react-dom';
3    function App() {
4        // Your app component's logic here
5        return (
6            <div>
7                {/* Your UI components go here */}
8            </div>
9        );
10    }
11    ReactDOM.render(<App />, document.getElementById('root'));
12     

‍
React has a big and active developer community that contributes to its growth and advancement. The React team continuously enhances the library and ensures it remains a powerful tool for web development. React's flexibility and efficiency have made it popular for building not only web applications but also mobile platforms through React Native.

In conclusion, React  rendering process, virtual DOM, and component-based architecture are the cornerstone of its efficiency and performance. By understanding how React works and leveraging its capabilities, developers can build user interfaces that make sense, respond quickly to user clicks, and provide a smooth and enjoyable experience across various platforms. Whether you're a seasoned React developer or just starting, the simplicity and power of React will empower you to build amazing web applications with ease.

Before I talk about this article, let me give a glimpse of some popular concepts in React.

React allows you to create basic views for each state of your application, and it will update and render the appropriate components when your data changes.

The modern rendering patterns in React are:

‍

Component Composition: 

This is a way to combine multiple components to create a more complex output. Each component maintains its own state and logic and can be combined in any way.

1     function Welcome(props) {
2        return <h1>Hello, {props.name}</h1>;
3    }
4    function App() {
5        return <Welcome name="Sara" />;
6    }
7    ReactDOM.render(
8        <App />,
9        document.getElementById('root')
10    );
11     

‍ Higher-Order Components (HOCs): 

HOCs are functions that take a component as an input and output a new component with extra properties or behaviors. It allows for the reuse of component logic.

1     function withSubscription(WrappedComponent, selectData) {
2        // ...and returns another component...
3        return class extends React.Component {
4            constructor(props) {
5                super(props);
6                this.handleChange = this.handleChange.bind(this);
7                this.state = 
8                    data: selectData(DataSource, props)
9                };
10            }
11            componentDidMount() {
12                // ... that takes care of the subscription...
13                DataSource.addChangeListener(this.handleChange)
14            }
15            componentWillUnmount() {
16                DataSource.removeChangeListener(this.handleChange);
17            }
18            handleChange() {
19                this.setState({
20                    data: selectData(DataSource, this.props)
21                });
22            }
23            render() {
24                // ... and renders the wrapped component with the fresh data!
25                // Notice that we pass through any additional props
26                return <WrappedComponent data={this.state.data} {...this.props} />;
27            }
28        };
29    }
30     

‍Render Props: 

A render prop is a technique for sharing code between React components using a prop whose value is a function. It gives more flexibility in how components are composed together.

1     <DataProvider render={data => (
2        <h1>Hello {data.target}</h1>
3    )} />
4     

‍##### Hooks: 

In React 16.8, hooks are a brand-new feature. They provide state and other React capabilities without the need for class creation.

1     import React, { useState } from 'react';
2    function Example() {
3        // Declare a new state variable, which we'll call "count"
4        const [count, setCount] = useState(0);
5        return (
6            <div>
7                <p>You clicked {count} times</p>
8                <button onClick={() => setCount(count + 1)}>
9                    Click me
10                </button>
11            </div>
12        );
13    }
14     

‍ Context API: 

The React framework provides the Context API, a component structure that enables us to communicate particular types of data across all application layers. It aims to find a solution to the prop drilling issue.

1     // Create a Context
2    const NumberContext = React.createContext();
3    // It returns an object with 2 values:
4    // { Provider, Consumer }
5    function App() {
6        // Use the Provider to make a value available to all
7        // children and grandchildren
8        return (
9            <NumberContext.Provider value={42}>
10                <div>
11                    <Display />
12                </div>
13            </NumberContext.Provider>
14        );
15    }
16    function Display() {
17        // Use the Consumer to grab the value from context
18        // Notice this component didn't get any props!
19        return (
20            <NumberContext.Consumer>
21                {value => <div>The answer is {value}.</div>}
22            </NumberContext.Consumer>
23        );
24    }
25     

‍These patterns help to make React code more reusable, understandable, and easier to maintain.

In the dynamic world of web development, React has emerged as an excellent choice for creating interactive user interfaces. As the demand for faster page loads, smaller bundles, and seamless user experiences grows, the React team has been diligently working on an innovative feature known as React Server Components (RSC).

With the release of React 18, RSC introduces a novel approach to React rendering , revolutionizing performance optimization.

In this article, we will delve into the world of React Server Components, explore its implications, and understand how it enables collaboration between the server and the client to elevate the capabilities of our React applications.

‍

What are React Server Components?

React Server Components enable a powerful collaboration between the server and the client (browser) during the rendering process of a React application.

In a typical React element tree, composed of various components rendering more components, RSC allows us to distinguish between server-rendered and client-rendered components.

This division of labor empowers each side to focus on their strengths, leading to faster page loads, reduced JavaScript bundle sizes, and an overall improved user experience.

Imagine a React tree where some components, depicted in Pink, are rendered on the server, while others, represented in blue, are rendered on the client. This division of labor enables a more efficient and faster rendering process.

‍

React Server Components vs. Server-Side Rendering (SSR)

It is crucial to differentiate between React Server Components and Server-Side Rendering (SSR), despite both involving server-based processes. SSR involves rendering the entire React tree into raw HTML, treating all components similarly, regardless of their intended rendering location.

On the other hand, React Server Components explicitly define components meant for server-side rendering and those meant for the client-side, enabling smooth collaboration between the two.

By combining SSR and RSC, developers can achieve even more powerful server-client interactions, leveraging the unique advantages of both approaches.

Advantages of React Rendering on the Server

Rendering components on the server offers several advantages over traditional client-side rendering:

1. Direct Data Source Access: 

The server gains direct access to data sources such as databases, GraphQL endpoints, or the file system, resulting in faster data retrieval without relying on external API calls.

‍##### 2.Optimized Code Modules: 

The server can efficiently utilize "heavy" code modules, like npm packages for rendering markdown to HTML, without requiring the browser to download these dependencies.

‍

The High-Level Picture

To illustrate the concept of React Server Components, consider the process of baking and decorating cupcakes. The server handles the baking, preparing the base cupcakes and frosting, while the browser takes charge of the creative decorating, filling in the cupcakes with desired toppings. This division of tasks streamlines the React rendering process and ensures faster completion.

Similarly, RSC allows the server to render server components as usual, while client components are replaced with placeholders. The browser then takes this output and fills in the placeholders with the appropriate client components, completing the React tree.

The Server-Client Component Divide

React Server Components and Client Components have specific limitations and restrictions. Notably, client components cannot directly import server components to avoid illegal dependencies in browser bundles. However, composition allows client components to accept opaque ReactNodes, which can include server-rendered components.

The Life of an RSC Render

The rendering process of a React Server Component involves several key steps:

1. The server receives a request to render a React component.
2. The server serializes the root component react
3. element to JSON, creating a stream of RSC output. This output contains server-rendered components as well as placeholders for client-rendered components.
4. The browser reconstructs the React tree from the JSON output, resolving promises and dynamically fetching client component bundles.
5. The browser renders and commits the React tree to the DOM, completing the React rendering process.

To better understand these steps, let's explore some code snippets that illustrate React Server Components in action.

Example Code Snippet - Server Component

1     // Greeting.server.jsx
2    export default function Greeting() {
3      return <h1>Hello from the server!</h1>;
4    }
5     

‍##### Example Code Snippet - Client Component

1     // Message.client.jsx
2    export default function Message({ message }) {
3      return <p>{message}</p>;
4    }
5     

Example Code Snippet - Combining Server and Client Components

1     // App.server.jsx
2    import Greeting from './Greeting.server';
3    import Message from './Message.client';
4    
5    export default function App() {
6      const serverMessage = 'Hello from the server!';
7      const clientMessage = 'Hello from the client!';
8    
9      return (
10        <div>
11          <Greeting />
12          <Message message={clientMessage} />
13        </div>
14      );
15    }
16     

Why react server component is different than server-side rendering?

React Server Components (RSC) are a significant evolution from traditional Server-Side Rendering (SSR). While both techniques involve rendering on the server, RSC introduces a paradigm shift. SSR generates a full HTML response for each request, which is then replaced or updated by client-side React.

This process is resource-intensive, as the entire page needs to be re-rendered with every update, leading to increased bandwidth utilization.On the other hand, RSC allows the server and client to share the responsibility of rendering.

The server takes care of rendering non-interactive parts of the component tree, which are then sent to the client as HTML. The client handles the interactive components, which are sent as JavaScript.

This selective rendering reduces the amount of data transferred, leading to faster load times and less data usage.

Moreover, RSC can access back-end resources directly, eliminating the need for APIs to fetch data. This results in less code, less data over the wire, and ultimately, a more streamlined, efficient application. Therefore, while SSR and RSC both leverage server rendering, the way they operate and their impacts on performance and efficiency are vastly different.

‍

Conclusion

In conclusion, React Server Components (RSC) is an exciting new feature that holds great promise for revolutionizing how we build and optimize React applications. It empowers both the server and the client to work together, making the most of their respective strengths to improve page load performance, reduce bundle sizes, and enhance user experiences.

By allowing the server to handle data fetching and React rendering while the client focuses on interactive elements, RSC paves the way for faster and more efficient React applications.

As we explored the high-level process of RSC rendering, the server-client component divide, and the RSC wire format, it's evident that React Server Components provide a powerful tool for building high-performance multi-page React applications. While it's still in its experimental phase, it's clear that RSC will play a significant role in the future of React development.

Now, as we continue to explore the possibilities of modern development, there are additional tools that can further streamline our coding experiences. One such tool is WiseGPT, a powerful plugin that seamlessly integrates with your React projects to generate code for APIs.

WiseGPT is promptless, mirroring your coding style, and automatically creating models and functions. With WiseGPT, you can eliminate the need for manual API requests, response parsing, and error management strategies for complex API endpoints. It handles everything, leaving you with a simple task—providing a collection of APIs.

Are you ready to supercharge your React development process with WiseGPT? Try out WiseGPT today and witness the magic of effortless API integration in your projects. Say goodbye to manual API handling and embrace the efficiency and elegance of WiseGPT. Happy coding!

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.