“Data Fetching with React Server Components” – Facebook Open Source (YouTube channel)
At the end of 2020 React’s team shared a new experimental update. It’s called Zero-Bandle-Size React Server Components. What is it actually?
React Server Component is a new way to create a React component which is rendered on the server-side. Why? After all, a CSR (ang. Client Side Rendering) is React’s advantage, right? React Server Components improve performance of React applications. It prevents overfetching data problems. One of the problems in React is the huge bundle size, because obviously it’s SPA (ang. Single Page
Application). Of course, there are such things like minification or code splitting, but it still takes time to download and as you know users don’t see the UI (ang. User Interface) until the js file was rendered on client-side. Here comes another problem – accessibility. Not everyone has access to a fast device and fast internet. The other problem is a lot of network request calls while the user waits for the data.
So, how do React Server Components work and solve the above problem? React’s team shared the demo app. Notice, this solution is still research, development and it waits for users’ feedback!
In the above demo, the React application has been divided into a few variants of components:
- .server.js extension – it’s a Server Component
- .client.js extension – it’s a React Client Component which you know very well
- .js extension – it’s for shared components. These components can be run both on server-side and client-side.
What is a huge advantage of Server Components? These have direct access to the database. You can fetch data from the database or backend file system directly in React Component! And you can also fetch data from other APIs like before on client-side. It looks pretty good, doesn’t it?
Importantly, in this kind of component you cannot use state because it’s not an interactive component. Like I said before these are zero bundle size components, so are not included in js bundle. They were not downloaded by the browser. It affects application’s performance.
You can also reduce bundle size by moving static, non interactive components on server-side and use only stateful components on client-side. Another plus is compatible with GraphQL queries in this type of component.
So, is it actually the same as SSR (ang. Server Side Rendering) e.g. in Next.js? Definitely no. The SSR approach sends rendered components as HTML into the browser so response looks very quickly. React Server Components work differently. These components are not rendered as HTML, but special streamed format, similar to JSON syntax. Please, have a look at the demo app. Notice that React Server Components can be re-fetched multiple times to re-render the data. However SSR is only used for the first initial render.
Conclusions
It seems to be a new, pretty good feature where developers will change the approach in writing React applications. You can use both client, server and shared components. React’s team wants to implement this solution into other React frameworks like Next.js or Gatsby.js.
To recap, React Server Components are optional. Client-side React Components are not going away. Remember, it’s an experimental feature. You don’t have to learn this or even bet a production project on it. In my opinion, for now the only right decision will be to participate in discussion on Github’s thread related to React Server Components :).
Let’s do IT!
Miłosz Bauman, Front-End Developer
