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.LinksEpisode PageTwitter Owl CreekTwitter Thomas HintzYouTubeResourceshttps://blog.plasmic.app/posts/how-react-server-components-work/https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.htmlhttps://vercel.com/blog/everything-about-react-server-componentshttps://www.patterns.dev/posts/react-server-components/https://blog.bitsrc.io/react-server-components-1ca621ac2519Show NotesOverviewPerformance, Load Time, Etc Critical for success53% of users abandon a website if it takes more than 3 seconds to loadUsers are not interested in using apps that have poor performance, don’t feel rightSo many ways to tackle the problem, what method to pick?Bundle Optimization with Webpack, etc.Performance Audits in AppServer Side RenderingWhat 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 ComponentServer receives request to renderServer serializes root component element to JSONBrowser reconstructs the React treeHow can we get started implementing?Vanilla React Implementationreact-server-dom-webpackNextjs ExperimentalShopify HydrogenSupport the show

Ver todos los episodios