What is React Server Component?
In this article, I would like to share the little information I learned online about Server Components , a completely new concept that is still in the testing and development process. So what is Server Components ?
First of all, make sure we all know the concept of components in Reactjs . Simply put, components is a function , takes a series of input parameters ( props ) and returns a React element , specifying what to display on the screen. Components allow us to break down the interface into independent, reusable, and customizable parts. We temporarily call the components that we know today as Client Component .
Server Component can be considered a new type of component , which will render on the server side before being sent to the client (browser).
Upon hearing that, I see quite similar to the way that Nextjs , frameworks that help to build react apps towards server render are quite popular and powerful. In fact, although not exactly the same, Server Component also brings many advantages similar to Nextjs such as:
- It is easier during development when we can directly connect to server- side resources such as database or internal services .
- Delivers better performance by reducing communication latency between client and server .
- Reduce the size of the source code. Libraries used only on the server side do not need to be transmitted to the client .
In addition, Server Component has another advantage that automatically divides the source code into small parts, then the clients only need to load the necessary parts to optimize performance. That means we won’t need to write code like this anymore
<span class="token keyword">const</span> AppComponent <span class="token operator">=</span> React <span class="token punctuation">.</span> <span class="token function">lazy</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span> <span class="token punctuation">(</span> <span class="token string">'./app'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
But let’s just import the components we need directly:
<span class="token keyword">import</span> AppComponent <span class="token keyword">from</span> <span class="token string">'./app'</span>
React Server Component and React Component.
As I said, the thought of Server Component is quite similar to how to do Server Render (SSR) with some tools like Nextjs today.
In SSR , when the browser requests a page , the component is rendered as HTML by react-dom / server tool, then sent back to the client . This rendering only happens once, correspondingly, each time we visit that page. During this process, we show that react-dom / server did one of the things that was read out the React Element structure of that page and converted it into static HTML . After this first render , our page will be no different from a regular React application. When the data needs to be updated, the client will either have to send a request to the API Server , similar to how the SPA application does, or refresh the page so that the server- side rendering is done again. Both processes will require the component to re- render from scratch.
For Server Component , the component is also rendered from the server side, then sending the result back to the client via a custom protocol. React receive that data and conduct consolidation (merge) the new interface with the existing structure without affecting the status of the client. This process can take place as many times as you like. Slightly abstract, can be understood that Server Component is a component that is completely rendered from the server side, not just once like the current SSR .
It can be understood that, for the client , React Server Component (RSC) is not quite the same as today’s components anymore. First of all, RSC can update only a small part of the interface, unlike SSR , RSC will never return a complete HTML page on first page load. But this load will be somewhat similar to how to do SPA , getting an HTML page with almost no content.
To make it easier to imagine, let’s look at an example below, let’s say we have a small application that displays a list of movies and an input box with a search function. Every time we do a search, the interface will update the corresponding new listing results. For conventional components construction, the process can be roughly described as follows:
- Every time you perform a search, a request will be made to a Server API , which returns a JSON result.
- When we get the result, we go to components (by changing the corresponding state or props ).
- React Component notices the change and renders and displays the new results to the screen.
For React Server Component , the implementation is slightly different as follows:
- A network request is sent to the backend server, which is capable of providing RSC .
- The component will render itself on the server side (steps 2 and 3 above) and return the client the result as a static markup, not HTML or JSON .
- Client side will read the received results and render to a static interface. The client side does not need to make a request for data to the server and render the result. Only convert render results from server side into static HTML .
Some notes at the present time
- Server Components cannot have interactions ( api can’t be used like useState or useEffect ) because they are only for updating interface.
- Server Components can still contain Client Components , and these components will still function fully as usual.
- Props passed to RSC must be serializable , meaning props can be strings or JSON , but not jsx .
React Server Component is still in development and testing, promising to be the next step of reactjs development that helps better support SSR as well as optimize react app. Let’s wait a little longer to experience this changed reality.