As someone who has been using React for many years, this code looked absolutely wild to me at first. 😅 · “But wait!”, my instincts screamed. “Function components can't be asynchronous! And we're not allowed to have side effects directly in the render like that!” · The key thing to understand is this: Server Components never re-render.
Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server. This separate environment is the “server” in React Server Components.
When you have multiple components in <Suspense>, React works down the tree in the order you've written, allowing you to stream in your application optimally. However, if the user attempts to interact with a certain component, that component will be prioritized over the others. This vastly improves the situation, but still leaves a few remaining issues: Data for the entire page must be fetched from the server before any components can be shown.
React Server Components are a new feature in React that allows developers to build components that can be rendered on the server and sent to the client. This helps improve performance and user experience by offloading some of the work to the server.
React Server Components have lifted server-rendering to be a truly first-class citizen of the React ecosystem. They allow developers to render some components on the server, while attempting to abstract away the divide between the client and server.
The term Client Component can be somewhat misleading because every component renders on the server at request time. However, in React, Client Components are those with the ability to handle state management and engage with standard web APIs and event listeners to facilitate user interactions on the client side.
React Server Components allows the server and the client (browser) to collaborate in rendering your React application. Consider the typical React element tree that is rendered for your page, which is usually composed of different React components ...
They can access server-only resources (databases, private APIs, secrets) and return a renderable UI result that React can merge into your app. ... Server Components: great for data fetching, heavy lifting, and static-ish UI.
The introduction of Server Components marks a significant shift in the React ecosystem, offering new possibilities for building efficient and performant applications. As the React docs explain, this new rendering strategy combines the best aspects of server side React and client side React, allowing developers to create more optimized applications using familiar React features.
Great for elegant components, but too costly when components existed just to retrieve data and prop it down. One More Little Thing React Server Components are server-side running components.