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

Upcoming in a React release is React Server Components. No, they aren’t just Server-Side Rendering. In fact, they are quite different and quite powerful in their own way. In this episode we learn about React Server Components and discuss how they could be used in applications of the future.

Links

Resources

Show Notes

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?
- Vanilla React Implementation
  - react-server-dom-webpack
- Nextjs Experimental
- Shopify Hydrogen

Support the show

About

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