From a761cb4038422e205896fe605626518121144b6a Mon Sep 17 00:00:00 2001 From: Henry Vogt Date: Fri, 22 Sep 2023 12:18:33 +0200 Subject: [PATCH] docs: assess react server components Co-authored-by: Henry Vogt --- radar/2023-09-01/react-server-components.md | 30 +++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 radar/2023-09-01/react-server-components.md diff --git a/radar/2023-09-01/react-server-components.md b/radar/2023-09-01/react-server-components.md new file mode 100644 index 0000000..9c825ae --- /dev/null +++ b/radar/2023-09-01/react-server-components.md @@ -0,0 +1,30 @@ +--- +title: "React Server Components" +ring: assess +quadrant: methods-and-patterns +tags: [frontend, coding] +--- + +Shortly after releasing React 17 in October 2020, the team announced React Server Components (RSC) in December 2020 as a working draft. +RSCs are described as a new kind of application architecture in React, to reduce the amount of JavaScript that's shipped to the client. +The overall goal is to achieve better performance, user experience and maintainability. + +The new feature allows to create components that are running on the server exclusively. That means there will be zero +effect on the bundle size that is downloaded by the client. For example libraries that are used in server components are +not shipped to the client. RSCs have the ability to access server-side resources (e.g. database, file system) directly. + +Besides server components there are client components that actually are the classic components everyone's known until yet. +The only difference is, client components need to be explicitly declared by a directive. To decide which component needs +to be client or server might become one of the more challenging parts, especially when migrating existing applications is +the goal. + +It looks like RSCs are most effectively used with Server Side Rendering, even tho it is possible to use them without it. +RSCs and Server Side Rendering complement each other pretty good, because server components are only rendered once on the server and +don't need to get shipped to the client. Client components are still rendered on the server and get hydrated afterward. +But with a smart application structure where the amount of client side code is reduced to a minimum and in combination +with React 18's [Suspense and Selective Hydration](https://github.com/reactwg/react-18/discussions/37) features there is an expected increase in performance. To prove this assumption the React team +decided to collaborate with Vercel (maintainer of [NextJS](/languages-and-frameworks/next-js.html)) to integrate early into a fitting environment. + +Overall we see the potential of this new approach, even tho there are still several steps to go, especially for the meta +frameworks to achieve production readiness. But it seems only a matter of time that adoption of React Server Components +will spread. That's why we put it to the assess ring, to keep an eye on this topic.