Venkata Sai Manoj Pasupuleti 0:19 Hello everyone, and welcome to my presentation. My name is Venkata sai Manoj possibility, and today, I’m thrilled to share with you the exciting world of React server components. Our topic for today is react server components, the future of React. We’ll explore how this groundbreaking technology is revolutionizing react development and empowering us to create faster and more interactive web experiences. So without further ado, let’s dive in and discover the future of React, React server components. In today’s fast paced digital landscape, user experience has emerged as one of the most critical factors in the success of any web application. Users are now demanding applications that are not only lightning fast, but are also which are highly interactive and engaging. However, as this appetite for more immersive and complex where experiences grows, the underlying architecture of these applications has become increasingly intricate. React server components represents a groundbreaking advancement in the development technology, enabling developers to meet these evolving expectations by utilizing service site rendering react server components offer a more efficient and a faster way to build web applications, significantly enhancing performance while Reducing the client side overhead. This innovative approach allows developers to create rich, dynamic user experiences without compromising on speed or efficiency. So what are these react server components? Let’s take a closer look at what these are. React server components represents a paradigm shift in how we think about React development instead of renting everything on the client side, react server components allows us to render some part of the application on the server. The server takes care of creating this HTML and sends it directly to the client in the form of streams. This means the client does not have to download and execute as much JavaScript as before, leading to faster page load and improve performance. For example, let’s take a look at these two figures on your right. Imagine that you want to render Uber hits page in traditional client side, rendering react, CSR, what happens is a request gets sent to the server. The server will take a look at the request and sends you the JavaScript to the browser. The browser now downloads the JavaScript renders the shell. This is sometimes loosely called as first paint or page interactive. This is where you tend to see the spinner action now, once the page now realizes that, okay, I need to actually make a API call to get the list of all the hotels that are nearby for me to actually show the complete page. So then an another API call gets made to the server to fetch the list of hotels, and then it gets the response back and actually renders the final page. This sometimes called the content page, wherein the page now includes the stuff the user cares about. We have pulled the data from the database and rendered it to the UI. As you can see, there are two round trip API calls that I’ve used to render this page. While it seems like common sense that you want to if you want to improve the performance of this page, that you want to reduce the number of API calls that are being made to the server. And react server components does exactly the same thing react server components. What happens is the entire application is first rendered on the server. It figures out whatever extra API calls that needs to be made to render this page are made, and the final HTML is generated on the server, and it is sent to the client in the form of streams. And so also, as you can see, a typical application, which takes close to 30 plus milliseconds to render in critical in CSR fashion takes about less than 30 to 40% less amount of time to render on the using the React server components fashion. So what are the advantages of React server components? One of the key advantages of React server components is the reduction in client side JavaScript. This means the user can experience faster initial page loads, especially on slower networks or devices. So as like we’re seeing in the previous slide, as part of the computation logic is now being done by the server. That particular Java piece of code or JavaScript does not have to be sent to the client side because it’s. Not needed. It’s all completely handed by the server. So the amount of JavaScript now needed to render the page is reduced, so the lesser JavaScript is being also sent to the browser. So in one more additional advantage, react server components improves the performance by leveraging the server processing power, which is much more in has much more computation power than your typical browser. Another feature is streaming. Streaming enables you to progressively render UI from the server. The page is split into small chunks and stream to the client as and then as and when they become ready. This allows users to see part of the page immediately before then, before waiting for the entire content to be rendered. Lastly, what’s also really great about React server components is it integrates seamlessly with the existing react applications. You don’t need to rewrite your entire code base to benefit from it. You can start by adopting react server components for just few parts of your application, and probably gradually expanding from there. Let’s say you whatever like really complex or computational intensive parts of your application, you can hand it over to you server to do that using the React server components and one by one. And this way you can, like gradually start adopting this new technology. So what are the challenges and considerations with React server components? While react server components offer numerous benefits, there are also some challenges to consider before starting this journey. Firstly, react server components relies on server infrastructure, meaning you have, you need to have a server environment in place to render such components. And also you take you also consider this additional computation that needs to now happen on the server, and budget for those while choosing the right appropriate servers. Additionally managing the state of server components can be tricky, and it requires careful planning, because now part of your application is rendered on the client side, part of your application is rendered on the server side. So you need to also think about, how do you how the interactivity happens between these two parts of your application? Finally, you may also need to update your existing developer tooling and workflows to make the most of this new technology. In conclusion, react server components marks a significant step forward in the evaluation of React development. The technology empowers developers to create faster and more interactive and more engaging web application by embracing the React server side ring through RSC, you can unlock a new level of performance and interactivity in your React applications, while there are challenges to consider seamless integration and progressive adoption capabilities make it practical choice for new and make it a practical choice for both new and existing react projects. So I encourage you to explore this new feature and see how it can help or transform your development process. Thank you so much for taking time to listen to me. I hope you all have a great day. Thank you. Bye.