What do React Server Components mean for the ecosystem and frameworks like Next.js? 🧵
This will simplify data fetching and enable future performance improvements (e.g. Concurrent Mode, Streaming SSR).

The React team has been thinking about this for a while. It's a massive effort. https://twitter.com/dan_abramov/status/1001103320495329280
Choosing server-rendering or client-rendering entirely isn't practical as your application grows.

Server Components take inspiration from prior art (PHP, Rails) and unlock a "hybird" data fetching model.
You will no longer need to choose client or server-rendering on a per-app basis. Server Components will unlock this at the *per-component level.*

For example, Next.js can only access the backend on a per-page level (e.g. `getServerSideProps`).
Should you use this right now? No. It's still experimental.

Adoption will start with frameworks (e.g. Next.js). Once that's figured out, you could create your own custom setup. Library authors will have to work on support as well (e.g. CSS-in-JS).
How will you share state between the client and the server?

The server is stateless. However, the React team intends to add something similar to the Context API. This state would be passed between the client and the server.
What does this mean for hosting?

It's still early. Obviously, you will need a server. Since React components are JS, initial backend support would also be JS. That doesn't necessarily mean Node, but something similar.
How will this improve Next.js?

Any pages that use SSR will have smaller bundles and faster response times. Using Server Components will be incrementally adoptable with newer versions of Next.js.
How is this different from SSR in Next.js?

With SSR in Next.js, all component code is sent to the client in the JS bundle. Server Components will allow you to choose "zero-bundle" or "whatever bundle you need".

This will improve performance and startup times.
Server Components are exciting and a major step forward. A massive congrats to the @reactjs team for their work on this. https://twitter.com/rickhanlonii/status/1341143278578708484
You can follow @leeerob.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:

By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.