The React team introduced Server components in December 2020. Zero bundled size components brought a lot of excitement to users because, in large scale applications, it's a well-known problem. This article will discuss the state of server components and how they can currently be used as an experimental feature in NextJs.
.png)
Server components allow us to combine the improved performance of traditional server-rendered applications with client-side applications. With server components, the way of structuring React components will be changed. As with server components not only do we get the reduced bundled size of javascript on the browser but also the initial loading time of the page. It will also simplify the data fetching and improves the access to databases and file system, which is currently non-existing in ReactJS.
Differences with Server Side Rendering (SSR)
So there is a lot of confusion comparing Server Components with Server-side rendering. They both are different yet complementary to each other.
Server-side rendering is implemented on a per-page basis. That means it is more of a high-level implementation while on the other end Server components are component-based.
SSR reduce the initial load time by sending HTML to the client from the server. That means there is still a need of downloading, parsing and executing HTML on the client end. The Server component sends a description of rendered UI from server to client using [[HTTP Streaming]](https://www.pubnub.com/learn/glossary/what-is-http-streaming/ "HTTP Streaming"). ReactJs then intelligently merge this new data to client-side components which helps maintain the state of client-side components.
Since Server components aren’t connected with browsers so managing state or any browser APIs won’t work here i.e useState, useEffect, window etc.
React Suspense and Concurrent Mode
React Server Components use suspense allows us easily to wait for your code to load. And to provide waiting for state or skeleton while that data is being fetched. Suspense using the techniques of HTML Streaming and Selective hydration creates a better User experience. More importantly, Suspense prevents the network waterfall.
As you see in the diagram the API requests are happening in the sequence. This is how it’s happening currently in ReactJS while fetching the components.
With Suspense API requests can be fetched in parallel by not blocking the client from rendering and call show fallback loader while the content is loaded.
Concurrent mode updates the states multiple times in an optimal way so that content is displayed as the data streams in rather than waiting for the entire response to finish.
NextJs Server Components Demo
In this demo, we will be experimenting with the RSC and Concurrent features. By using NextJS Server components demo the NextJS project can be easily scaffolded using React 18 experimental features.
We are using JSON placeholder as a source of data for this demo.
In pages folder index.server.tsx is created to render the page on the server.
Posts are fetched on the server using Posts. server.tsx component. The component is wrapped in a Suspense element allowing a fallback spinner to be shown whilst loading the server component.
The PostWithData server component includes server components that fetch the comments and users. These nested server components are wrapped in suspense elements so that a loading spinner can be shown whilst loading.
Its to be noted that Server components can render client components but it isn’t possible the other way around. That's why the Server component changes the structuring of ReactJS applications. The complete and running demo can be found here.
Conclusion
Server components and concurrent features are undoubtedly the biggest features that impact not only the performance but also better UX experience and nicer structure of components. Since they are experimental it's likely to be more stable and supported other ecosystem libraries by mid or end of this year.
Server component will make it easier to render on component base rather than page basis in NextJs.
