Introduction

Introduction

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

  • |

Lesson Transcript

  • [00:00 - 00:19] Hi everyone, welcome to Complex State Management with Server and Client Components using Next.js. I know, it's a mouthful. I promise it's gonna be good. I'm Fernando Doglio and I'm gonna be your teacher for the course. I just wanted to tell you a little bit about me so you know why I've created this course. I've been around for over 20 years, so essentially since before jQuery was a thing.

  • [00:20 - 00:47] I've been using JavaScript for my entire career and I've written 8 books about it throughout it. I've also written almost 400 articles about web development in general and I've had contact with many frameworks and many libraries throughout that process. And one of the major pain points I've been able to pick up from the dev community recently is the use of server components within NextJS projects and how that interacts with state management. So that's why I created this course.

  • [00:48 - 02:45] So in general this course is all about understanding complex state management in Next. Without ignoring many of the powerful tools that the framework actually gives you including obviously, server components. Sadly, as I mentioned before, this concept, even though it's new because it's been around with React for a couple of years already since version 13 of Next, many developers have had difficulty getting to understand the concept of a server component and how that relates to state management. So throughout the course, we're going to cover topics such as server components, we'll compare them to client components and how they both interact with state. We'll also really cover what state is both in the back end and the front end and we'll also compare server components to server side rendering because there is also quite a confusion about that topic as well. So maybe you're wondering if this courses for you. If you're already familiar with React or if you already know how to use the useState hook or you know if you're having recurring nightmares about server components chasing you down some dark alley, I mean, that's also valid reason. Essentially, if you've had some interactions with React in the past, this course is great for you. So to sum it up, the objectives of this course in general are going to be understanding what server components are and how to properly use them, how they compare to client components and when should you use one or the other. We'll also go into a concept I like to call page architecture, which we'll cover doing this model. So don't worry about that. But you'll teach you how to structure your page internally thinking in terms of server components and client components. We'll also go about the best practices around state. What is it and the different ways in which you can manage it. And finally, we'll answer the big question. How to share a state between client and server components.

  • [02:46 - 03:22] Is it possible and how best to do it. So before we go for now, just think about all the state management questions you've had in the past and try to write them down somewhere, either your notebook or a notion page or wherever, just to keep track of them because we're going to be tackling them all during the course. And I think that's it for the intro. So if you're okay with it, I think it's time to get technical. Let's go. .