Zero-bundle-Size | Server Components all you need to know.

If you’re reading this story I’m sure that you at least know what React Component is and I know, now you’re in a rush and have no time to read things that you don’t understand. So, I try my best to make things easy.

So, What is a Server Component?

Components that are rendered on the server and returned to the client and all the JSX inside the server component are returned not as HTML but as a different format. Server components are not something that you will soon get in an upcoming update but it is something that Facebook wants to introduce in react. There is no official documentation or something like that about the Server Component.

Pros and Cons:

• Cannot have any interactivity and is static, which means we can’t view state or add event listeners.
• Server Components can import Client components so if you wish to add interactivity, Client components can have interactivity so use the Client component inside the Server component.
• We can pass props to the Client component from the Server component only if that prop is serializable over the network else is an error. That means you cannot pass a function as props as it is not serializable & of course JSX is serializable.
• SSR(Server Side Rendering) and Server Components are both similar in concepts. In Server Components the client-side state is never blown away and it’s always preserved. That means if you open a dropdown menu and click a component that displays another server component you can still see the dropdown or no change to client-side state even after using the network. The reason why we can do this on a Server Component is Server Component doesn’t render to HTML they render to a special format. That’s one advantage that you will never get in SSR. Yes, you can use both SSR and Server Component in your application both are complimentary.
• Server Components have zero effect on bundle size.
• Server Components let you access the backend resources directly such as database or file system.

New concepts

After an update to React with Server Components, it’s totally your wish to use the Server Component, React never forces you to use it.

If you want to create a server component you need an extension “.server.js”.

For example ProductList.server.js

And if you want to create a Client Component you need an extension “.client.js”.

This way of formatting aware React which is Server Component and which is Client Component.

What happens if you don’t add “.client” or “.server” to the Component file name?

Then these components are called Shared Components. Shared components can render on both server and client. Whether or not it renders on the server or client is determined by what kind of component is importing the component. If you import it in Server Component then it is Server Component else it is Client Component. Shared components will not get downloaded earlier they get downloaded according to the need.

You can find a youtube video explaining all about Server Component: link

Thanks.