What are React Server Components and Why They're Awesome!

Overview

Performance, Load Time, Etc Critical for success
53% of users abandon a website if it takes more than 3 seconds to load
Users are not interested in using apps that have poor performance, don’t feel right
So many ways to tackle the problem, what method to pick?
- Bundle Optimization with Webpack, etc.
- Performance Audits in App
- Server Side Rendering

What are React Server Components?

Before RSC, all components were rendered in the browser...
With RSC, parts of the React Tree can be rendered by the browser, and other parts are rendered on the server.

How is it different than Server Side Rendering?

What are the main benefits of using React Server Components?

How do React Server Components work?

component.server.jsx, component.client.jsx , component.jsx
Client Components cannot import Server Components, only regular or Server components can.
Server Components can import Client components and Server components, and then within that, you can nest Server Components under Client Components.
Lifecycle of a React Server Component
- Server receives request to render
- Server serializes root component element to JSON
- Browser reconstructs the React tree

How can we get started implementing?