And then it becomes interactive, but still kind of awkward. We use React 18, which gives you three components: server, client, and shared. The cool thing about server components is that you don't add anything to the bundle. We still need interactivity, so we use server components for specific tasks. However, not all libraries are compatible, and data fetching can slow down the site. React provides suspense to handle heavy components.
And then it becomes interactive, but still kind of awkward. And I guess what we would like to have, especially for commerce sites, is something more like this, right? It opens, and I can buy immediately.
So right, that's why we are using React 18. React 18 gives you three components now. The server ones. Client and shared. And the client components is what we kind of already do, right? We use state, and we do this, I don't know, these functions. And they get sent to the browser. They get rendered there. Except with all the iteration stuff that I talked about that is, you know, all the magic. The new ones are server components, and these are very interesting because you do the same thing as client components. But the end result is that this is HTML that gets sent directly. And the final one is shared components. Which is something that could be in the client, or in the server as well. But I think the main thing I want to talk about is client and server components.
The cool thing about server components is that you don't add anything to the bundle. So you just send HTML directly. The way we use them in Hydrogen is we build them normally, like any other component, but we also do queries to the database. And then we put them in the components, and the end result is just send HTML directly to the browser. So why don't we use server components for everything? Because we still need interactivity. If I want to buy a different amount of products, I want to be able to choose that and do a server render. Because of that, it's maybe too much. Just some of our learnings has been that, as we roll out server components, not all libraries out there are compatible. So that's one issue that we've had. So sometimes you have to mingle around to try to make them work. A second learning is that, as soon as we gave server components to people, they started to do a lot of data fetching. This could take long, and then people are like, OK, is the server components supposed to make my site faster, but actually slower? But it's because we are data fetching a lot of stuff. So something that Reacting is giving is suspense. So what you would do is wrap this component that's very heavy in suspense, and the result is, for example, in this example here, everything is rendered, but that little part that might be a bit heavy gets later rendered and served. They are still hard to debug.
Comments