React

Vincent Collis
2 min readApr 11, 2021

New Feature Alert

React JS is Developer God’s gift to Javascript developers. This is not an overstatement or embellishment of meaning. Javascript is the essence of a web application. It breathes life into the web and allows the creation of interactive environments and elements that increase the web’s overall user experience.

React does this by being a declarative, efficient, and flexible JavaScript library that allows developers to compose complex UIs from small and isolated pieces of code called “components.”

Currently, the React team is experimenting with the idea that could add a ton of depth and value to React development. The idea is to separate components into two types: Client Components and Server Components. This would start by differentiating them by file extensions (.client.js and .server.js).

The Good & The Bad

Pros

Server-side rendering can offer a lot of advantages.

Bundle sizes will be cut. Depending on your application, you may be utilizing libraries that are only used on the server. With direct access, we will no longer need to serve the client.

Development can be easier due to having direct access to server-side resources like a database or file system. With direct access to these kinds of resources, we can cut delays created by network latency between our user’s client and the application servers.

Cons

No use of state!

Since a server component would be rendered on the backend, they would lack the ability to be interactive. This would require importing client components inside of a server component so interactions can be feed from the client to the server. This is an added complication but seems like a small price to pay for the boost granted!

This is still in its experimental phase, so some of this initial scoop of information may be dated by the time you read this! But be sure the React team is always looking to improve Reacts performance as a code base and ease of use when developing. Check out this video from the React team for more information!

https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

--

--