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. 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 usingthe NextJS project can be easily scaffolded using React 18 experimental features.
We are usingas 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.
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.