React server components

Key Takeaways

React server components are changing the way we build web apps, but a lot of explanations make them sound way more complicated than they really are. So, think of it like this. Normally, React sends JavaScript to the browser and then the browser builds your UI. With server components, React builds part of the UI on the server first and then sends the finished pieces. So, it's kind of like getting a partially assembled IKEA furniture instead of just the pieces and instructions. So, let's take a look at this regular component. We need to use the use state hook to hold the user data. use effect will trigger the fetch and then we make a a network request from the browser to the API. Now let's look at the same thing as a server component and notice it's an asynchronous function. I'm hitting the database directly with a wait and there's no hooks, no API calls, no client side data fetching. So the component runs on the server, grabs the data and then sends the finished HTML to the browser. Now there's three big wins here. First, you have smaller JavaScript bundles because server logic doesn't ship to the browser. Second, you're using direct database access, which means faster data fetching. And third, you get better SEO because content renders on the server. I've seen apps reduce their bundle size from 30% just by moving data fetching to server components. Now, one thing to remember is that server components can't use hooks or handle events. So, they're for data fetching and rendering. You still need to use regular client components for interactive stuff like buttons and forms.