Member-only story
The Future of React: Server Components
An introduction to React’s upcoming feature
What Are Server Components?
Today, we have React components — and that’s it.
However, the React team is now experimenting with a new idea of separating components into two types: Client Components and Server Components. The proposal is to start differentiating them by file extensions (.client.js and .server.js). So what are they?
Client Components are just the components we have today.
Server Components, on the other hand, are a new type of component that is first rendered on the server side before being sent to the client side.
What Are the Advantages?
At first glance, it sounds very similar to server-side rendering (SSR). In fact, it offers a lot of similar advantages:
- Easier development due to having direct access to server-side resources (e.g. database, the filesystem, internal microservices, etc.).
- Faster performance, as we avoid the network latency between server and client.
- Smaller bundle size. Libraries that are only used on the server (e.g. utility libraries such as
lodash,rambda,moment, and so on) do not need to be served to the client.
It also offers some quality-of-life improvements for React developers. Most notably:
- Automatic code splitting (i.e. the practice of splitting up code into small bundles so clients can only load what’s necessary). Currently, React developers have to make a conscious effort to implement code splitting by writing something like:
In the future, Server Components will handle it automatically. This means we can write import code as we would normally:
However, the biggest advantage can only be understood when we take a closer look at the difference…
