Frontend Ecosystem
Will React Become a Full-Stack Framework -2 (RSC)
In my previous blog post, I evaluated the situation from a more general framework. In this blog post, I will evaluate the situation through the effect of RSC (React Server Component) on this situation.
In the previous blog post, I tried to explain React’s effort to become a Full-Stack framework based on Vertical Slicing, Framework Ecosystem and paradigm shifts in React. In this blog post, I will focus on RSC (React Server Components).
React Server Components means components that can be rendered on the server side. The most important thing about React is the component model and the way these components compose each other to create the application. Until now, these components were uniform. In other words, it had a structure to work in the browser.
Note: This does not imply that components may be displayed on the server using build-time SSG or SSR. I mean connecting to the server from within the components and running them on the server.
First of all, this is a new component model. And we will be able to distinguish whether these components are Client or Server Component with the following directives.
'use-client'
'use-server'Of course, these 2 component types have different features. For example, Next.JS has made a small capability comparison.
After explaining that these 2 components are different, let’s take a closer look at how React turns into a framework with some videos.
Our first video. “Mind The Gap” by Ryan Florence at Big Sky Dev Con 2024
There are many details in this video. I definitely recommend you to watch it. But let me explain the parts that support FullStack with 1,2 slides.
Slide 1
Previously React was only a Frontend library and the Network layer was managed with many 3rd Party libraries and Frameworks in the Network layer, now this need will be eliminated, because RSC (React Server Component) will manage this part in React itself.
Slide 2
Ryan mentioned here that after the Frontend of React, the Network layer will be followed by the Backend, where this part will be filled with many libraries and components.
Of course, we can say that these concepts are the results of a 6.7-year study of React Server Components and the underlying Concurrency Model, Fiber, Suspense and many features.
Our 2nd video is Kent.C.Dodds Abracadabra Vanishing Network Video.
In this section you can see how the Network layer is eliminated with RSC.
Our 3rd video’s Delba de Oliveira “React ‘use client’ visually explained: What, Why, How”. Video
In this video she explains the RSC work with visualization.
Network Boundary is one of the most important issues we will focus on in this section. These boundaries are very important in React component models. If you want to learn more about this topic, I recommend you to read my React Boundaries (Error, Suspense, Bundle, Context, Server/Client Boundaries) blog post.
With React RSC, React has also taken over the Network Boundary part. After that, they aim for the FullStack App approach to become widespread and the ecosystem to grow with it.
Here, there is an eye on a market with the PHP, .NET, Java, Python, Ruby ecosystem I mentioned before. We will see how successful they will be in time.
In this part, there will be DX (Developer Experience) and CX (Customer Experince) gains from React being Fullstack. In fact, it is explained that the RSC, Suspence and Actions exit mechanism basically exits without providing better quality service to the user.
LearnReactUI.dev
Don’t forget to subscribe to LearnReactUI.dev to further your own career in the React Ecosystem. This is a website for React developers who want to develop real-world Web Applications.
