Main content
Every section on this page is a React server component, each acting like a micro website with data
streamed when it is available on the server
- It displays a skeleton loader while it waits for the component to load.
- This is a significant improvement in UX compared to use of page level SSR and getServerSideProps
which blocked the entire page until data fetching is complete.
React Server Components (RSC) represent a significant advancement in how React applications can be built, enabling a more efficient way to render components directly on the server side before sending the result to the client. This approach offers several benefits, fundamentally changing how data fetching and component rendering can be optimized in a React application.
Key Features of React Server Components:
- Zero Bundle Size for Server Components: Server Components are rendered on the server and only send the necessary HTML and data to the client. This means any code within Server Components doesn't add to the client-side bundle size, leading to faster load times.
- Seamless Data Fetching: Server Components can fetch data directly in their component files, simplifying data fetching patterns and reducing the need for client-side data fetching and state management libraries.
- Gradual Adoption: React allows you to integrate Server Components into existing applications gradually. You can mix Client and Server Components, enabling you to optimize the most critical parts of your application without a complete rewrite.
- Richer Server-side Capabilities: They can directly access server-side resources (databases, filesystems, etc.) without exposing sensitive operations to the client, leading to more secure applications.
- Improved Performance: By offloading work to the server, Server Components reduce the amount of JavaScript shipped to the client, decreasing load times and improving interactivity, especially on lower-powered devices.
Benefits of RSC:
- Performance Improvements: Since Server Components contribute zero to the client-side bundle size, users experience faster initial load times and improved performance, especially on mobile devices or slow networks.
- Efficient Data Loading: Integrating data fetching into server-side rendering workflows allows for more efficient data loading strategies, potentially reducing waterfalls in network requests.
- Enhanced User Experience: By leveraging the server's capabilities for rendering and data fetching, Server Components can help in delivering a smoother and more responsive user experience.
- Reduced Complexity in Data Fetching: Server Components allow developers to fetch data in the server environment, reducing the complexity and boilerplate code associated with client-side data fetching.
- Simplified Component Logic: Since Server Components do not have to deal with client-side concerns like event handling or state management, their logic can be simpler and more focused on rendering and data fetching.