Awesome Christmas Gift from the React team! (React Server Component)

What the hack is the Server Component?

Oh yeah, It is a Scary topic, to be honest personally I think this can change the entire React ecosystem and the way we are thinking about the implementation of the framework. somehow we are mixing frontend with server and our React components have access to the database or server directly.

Regarding the React team Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.

let us highlight some of the server component's abilities and behaviours.

  • Server Components run only on the server and have zero impact on bundle-size. Their code is never downloaded to clients, helping to reduce bundle sizes and improve startup time. so if you have some heavy libs you can keep it just in the server and never bundle it with the client. Yay
  • Server Components can access server-side data sources, such as databases, file systems, or (micro)services. this means you don't need to call API to get data because you have access to them directly and you save tons of network time
  • Server Components seamlessly integrate with Client Components — ie traditional React components. Server Components can load data on the server and pass it as props to Client Components, allowing the client to handle rendering the interactive parts of a page. this one is super cool you fetch data from the database and pass it as props to the client component to render and handle logic and state
  • Server Components can dynamically choose which Client Components to render, allowing clients to download just the minimal amount of code necessary to render a page.
  • Server Components preserve client state when reloaded. This means that client state, focus, and even ongoing animations aren’t disrupted or reset when a Server Component tree is refetched.
  • Server Components are rendered progressively and incrementally stream rendered units of the UI to the client. Combined with Suspense, this allows developers to craft intentional loading states and quickly show important content while waiting for the remainder of a page to load.
  • Developers can also share code between the server and client, allowing a single component to be used to render a static version of some content on the server on one route and an editable version of that content on the client in a different route.

Wow, I have to say until everything is amazing and the React team deserves claps.

let us check one simple and basic server component

let me explain very quick line by line what’s happening at the above code. at line 1 we import the database from db.server to fetch post or note directly from our database in our React component then we render NotEditor in the page which is a client-side component and we pass the note or our data as props to it now let’s take a look at note editor component

This looks like a regular React component because it is: Client Components are just regular components.

Whats other benefits of RSC

  1. Zero-Bundle-Size Components
  2. Full Acess to the backend
  3. Automated Code Splitting
  4. No Client-Server Waterfalls

Note this feature still is under experiment and it's not suggest to use yet for production but you can start work and experiments with it just you need to clone this repo https://github.com/reactjs/server-components-demo

Other resources:

  1. RFC
  2. React Talk and announcement

How to find me:

Linkedin

Instagram

meetup

Please like and follow me thanks that means alot for me and help me to write more

--

--

--

If you want to know more about me follow me on instagram and Linkedin and shoot me a DM

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Prepare your webpage for Chrome’s upcoming “Fast page” label 🚀

Containerize your Single Page App. The ONLY Right Way

WKWebView. Obscure topics

JavaScript: Style Guide

3 Scenarios Where You Shouldn’t Use Arrow Functions

Mirroring LCD Display over Web Bluetooth

The Difference between Var, Let and Const | JavaScript 01.

Learn Javascript

Building Reusable & Customizable Elements for Components Using React JS⚡

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
React Dojo

React Dojo

If you want to know more about me follow me on instagram and Linkedin and shoot me a DM

More from Medium

How I built my React app from the scratch with Webpack and Babel

Intro to Basic React Hooks

When learning about react, how useful is it to know about react hooks and components?

Using Updated State value in React After Immediate State Update