Mastering State Management in Web Development using Server and Client Components

[00:00 - 00:32] Alright, welcome to the second video of this introductory module. Here I want to just solidify exactly the concepts that we're going to be working on and kind of run you through a little bit of the tech stack and the sample application I created to show you the concepts that we're going to be covering. And so I want to show you everything before we get started with the theory and understanding different concepts. So the first thing that I want to cover is the tech stack. As you can see, it's very simple. We'll be using throughout the course this and pretty much nothing else.

[00:33 - 01:51] We'll focus on next clearly. That's what the course is about. But with any emphasis on features that were released since version 13. We'll also be using MongoDB as database for the app that I'm going to show you in a minute. While it's not mandatory that you know or had experience working with Mongo in the past, it will help you fully understand the examples I'm going to show you. But if you don't, don't worry about it. I will be covering everything in detail anyway whenever we look at code. So whenever we get into any Mongo specific function, I'll make sure to explain it. So don't worry about that. So for the example app that we're going to be using, you can see here a quick screenshot of it. It's essentially a task manager I created. I just want to run you quickly through the app to show it to you. And while I do it, I just want you to think about three questions. Which component would you create as a server component? Which component would you create as a client component essentially? And why is that? We'll be tackling all those questions throughout the course. So don't worry if you don't have a specific answer or if you don't have a well-fundamented why. The reason I want you to think about that is because by the end of the course, you should be able to answer those questions without even looking at the code.

[01:52 - 02:04] You should have that intuition by looking at the way the page works and the interactivity level that it showed you. You should be able to pick up on whether it should be a server component or a client component.

[02:05 - 03:10] But let me just quickly run you through the application. So as I mentioned, the application is a very simple task manager essentially. You have your login form here, which you can also turn into a signup form. I already have a user created. So I'm just going to login here. This is hitting the data, the Mongo database in the backend and it's authenticated my user that way. So here I have already some tasks that have been created. I can use this form to create new tasks. For example, I'm going to show that super quick here. So first task, this is the description. And I'm going to set a due date for next month. So that will be here. And I can add it. And as you can see, it was added here at the bottom of the other screen. I can also just here log out. This is a very simple feature, but still relevant when we look at it and how it works.

[03:11 - 06:01] But as you can see, it's a very basic application, but still it has enough complexity and enough state management, as you can probably imagine, that it covers everything that we want to cover in the course. So moving on, if it wasn't clear enough yet as the name of the course implies, we want to focus on state management using server components and client components, essentially. So the question, the question that we want to answer throughout the course is how to share state between client and server components. To answer that question, we'll have to understand the entire underlying structure and concepts. We want to understand state, what is it, and the different ways it looks like, whether you're on the client side or the server side. We also want to understand how server components work. This is very relevant and not a lot of the developers actually understood it when React released these type of components a couple of years ago. And when Next introduced them as a default type of component on the new app router architecture, many developers simply opted out of them and added 'use client' everywhere to make sure that they could keep working the way they've been working until then. So we will focus on server components. We'll try to understand them. In the image that you see here, it's very simple, but you have the separation between server line and browser land. Essentially, everything in server land will be server components. Those little boxes that you see here are server components that are being rendered on the backend. And then the little red ones are the ones that get hydrated in the front end. We'll cover that in more detail. So don't worry about it at this stage. Just keep in mind that this is also something that by the end of the course, will be a concept that you'll be able to master. So the end goal of this course is for you to fully understand and answer the question on looking at this diagram here. How are the boxes on the top able to share information back and forth with the boxes on the bottom? Essentially. And before we finish this video and get on to the next one, I want you to think about two questions. So how do you structure your pages? Essentially, you know, thinking about the diagram I just showed you, try to translate that into an actual page that you're building. Think about the JSX that you're adding, the HTML there. How would you structure it? Which of your components will be server components? Which ones will be client components with everything you know until now? Clearly, we still have a lot to cover before you can actually and properly answer that question.

[06:02 - 06:10] But start thinking about these questions because they're going to be relevant on the next video. All right. And that's it for now. See you on the next one.