Server components as an experimental feature in NextJ

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.

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]. 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 wrapper in Suspense to show the fallback spinner.

PostWithData Component is a server component which further fetches the Comments and Users. With Suspense wrapper around the components, it will show loader until the data have shown.

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.

Author:

Muhammad Shahzad
Software Engineer and Consultant

Shahzad is Software engineer with over 8 years of experience in industry. He likes to works in ReactJs, NextJs and related ecosystem. An enthusiast about new technologies in the industry. He loves photography and usually like Landscape photography. He also has 1 year old daughter which he usually loves to spend time with.

Find more articles on our foobar Agency blog.