Have you tried Next JS's Server Components?

They're super confusing, aren't they?

Ever since they were announced with NextJS 13 (I know they were part of React before, but that announcement went over most of our heads), I haven’t been able to properly use server components.

What about you?

My main issue has always been the same: state.

Every time I add the damn useState hook, my whole server component goes away and now I suddenly have to add “use client” at the top.

I hate it, there is a reason why we now have server and client components, however, I just couldn’t make any sense out of them, and instead of stopping for a second and trying to understand the docs, I would default to having all client components.

Did that work? Sure!

Was that the right way to solve this problem? Heck no!

A server component is an oversimplification of React’s components, but they’re great when you have to do data gathering (either from a database, third-party API, or somewhere else).

Back then, you’d have to either use the useEffect hook to perform external requests, or if you wanted to interact directly with the database, you’d have to use something like getServerSideProps.

export function getServerSideProps() {
  //... call the db here and get your data

  return {
    props: {
       user: your_user_data,
       books: your_book_data
    }
  }
}

export function MyComponent({user, book}) {
  
   //.....

}

That works, don’t get me wrong, however, we can all agree that the following approach makes more sense:

export function MyComponent(){

  let user = //... get your user data from the db
  let books = // ... get your books data from the db

  //now use both variables

}

Better right?

And that’s just the tip of the iceberg!

Introducing my new NextJS course

Yes, of course I have something to tell you about! I’m constantly creating something! With some of my creations, I’m trying to help other devs, with others I’m just trying to make money.

And with some others, I want to do both, don’t blame me!

I’m building a new course with the folks at NewLine, they host many different courses about web development and other topics, and I’m building one about complex state management with NextJS 13 (including of course, how to interact with server components using your state data).

It'll be a practical approach to answering some of these questions:

• What are server components and how do they compare to client (or “normal”) components?

• What exactly is state and how are we “used to handle it” using client-side techniques?

• How do server components see state and handle it?

• How can we share state data between client and server components?

• Are the usual tools that we’re used to using compatible with this new client-server environment?

Sounds interesting? Here are more details about it.

This is still a Work in Progress, which means you can still help shape how the course looks! If there are specific problems you’ve encountered in the past, and would love to have a course covering them, leave a comment!

I’m hoping I’ll be able to get some sort of discount for the first few users who buy the course, so I’ll make sure to keep you updated if you’re interested. So if you happen to be, go here and leave your email!

Help me make this course the ultimate resource around complex state management with NextJS!