Complex State Management with Server & Client Components in Next

Learn how server components work in Next.js and how you can use them to share state between the client and server. Learn the best way to architect pages by combining server and client components and improve the overall performance and UX of your apps.

  • 5.0 / 5 (1 rating)
  • Published
  • Updated
On demand video

2 hrs 47 mins

Video Lessons

18 Videos

Course Instructor
Avatar Image

Fernando Doglio

Developer Advocate @VoiceMod, Published Author with PacktPub, Apress and Manning. Words published weekly on Medium

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with Complex State Management with Server & Client Components in Next. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Overview

What you will learn
  • How server components work

  • How to combine server and client components to improve page loading times

  • How to use props to share state from server to client components

  • How cookies can be used as state storage

  • How to take advantage of hydrated state to share state between client and server components

Complex State Management in Next.js 13+ with Server and Client Components

Sharing and managing state between server and client components is not trivial, especially with the limited information available online. This course will take you through all the basics you need to answer the question:

How do I share state between server and client components in Next.js?

Module 1: Intro & Getting Started

Begin your journey by understanding the essentials of Next.js 13+ and state management.

  • Overview: Get an introduction to the core principles and concepts of Next.js 13+. Familiarize yourself with the course structure, the instructor's background, and the tools you'll be using.
  • Goals: Set clear expectations about what the course will cover, including fundamental problems related to state sharing between server and client components.

Module 2: State

Understanding the heart of React applications: state.

  • General Concept of State: Dive into what state really means in the context of web applications. Explore how state affects the design and functionality of your app.
  • Local vs Global State: Master the differences and applications of both local and global state to make informed decisions in your coding practice.
  • Management Techniques: Get to grips with various strategies and tools for managing application state, including popular third-party libraries.

Module 3: Client Components

Dissect Client Components and unravel their role within Next.js.

  • Component Structure: Break down the anatomy of client components, learning how to create them and understanding their role within the application.
  • Capabilities and Limitations: Examine what client components can do, understanding their scope and limits, and what is reserved for server components.
  • Proper Utilization: Develop a keen sense for the appropriate use of client components, paying special attention to interactivity and dynamism. Wrap up with a quiz to reaffirm your knowledge on client components.

Module 4: Server Components

Unveil the capabilities and edge of using Server Components in Next.js.

  • Understanding Server Components: Define what server components entail and their architecture, emphasizing state-related functions and limitations.
  • Contrasting with SSR: Compare server components to traditional server-side rendering and understand when and why server components offer an advantage.
  • Best Practices: Learn to discern when it's most appropriate to use server components, and explore the "server-land" where certain server-side actions take place. A checkpoint with a pop quiz will round up the module, cementing your understanding of server components.

Module 5: Page Architecture

Review and refine the structures that make up your Next.js applications.

  • Maximizing Performance and Simplicity: Explore the design patterns that allow you to make the most of Next.js features, leading to optimized performance and simplicity in your project structure.
  • Practical Application: This module revisits the concept of page architecture, providing more complex and practical examples of how to partition components for scalability and maintainability.

Module 6: Sharing State between Client and Server Components

Integrating the dual realms of Next.js, bringing together server and client component state management.

  • Identifying the Problem: Delve into the nuances of managing and sharing state in server components, identifying when it differs from client-side state management.
  • Cross-Component Communication: Learn how to efficiently pass state and props between server and client components.
  • Working with Cookies and HTTP Requests: Gain hands-on experience with cookies as a mechanism for shared state, and leveraging HTTP requests to sync state across the server-client divide.

By the end of this course, participants will acquire a comprehensive understanding of managing state within Next.js 13+ applications, effectively using both the server and client components to build robust, scalable, and maintainable web applications.

NextJS

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Course Syllabus and Content

Module 5

Improving Page Architecture

1 Lesson 27 Minutes

Module 7

Final words

1 Lesson 2 Minutes

Meet the Course Instructor

Fernando Doglio

Fernando Doglio

👋 Hi! I'm Fernando Doglio, web developer with a passion for all things JavaScript!

Over the past two decades, I've been riding the ever-evolving wave of the software development industry. From the early days of the web to the current era of dynamic and responsive applications, I've been on this thrilling ride.

My journey began with a love for web development, and JavaScript quickly became my language of choice. For me, there's something magical about turning lines of code into interactive and user-friendly experiences. I've tinkered with various frameworks and libraries, but my heart has a special place for JavaScript and its ecosystem.

In between sipping countless cups of coffee, I've managed to pen down not one, not two, but eight books on JavaScript-related topics. Whether you're a beginner trying to wrap your head around the basics or an experienced developer diving into the intricacies of the language, I've got you covered.

And if that's not enough, I've unleashed a torrent of knowledge through more than 400 articles on software development. From troubleshooting common bugs to exploring the latest trends, I've shared my insights with the community, hoping to make the coding journey a bit smoother for everyone.

Now, as we dive into the realm of NextJS state management in our course, I'm excited to share my experiences and expertise with you. Let's navigate the seas of state management together, making your journey not just informative but downright enjoyable!

So buckle up, and let's embark on this coding adventure!

Frequently Asked Questions

Who is this course for?

This course if for front-end and back-end developers who want to learn how server components works and how they interact with client state

Why is this course free?

We wanted create a super simple course & boilerplate for anyone looking to start building GraphQL APIs with some of the most popular tech stacks.

What if I need help?

You can ask us questions anytime through the community Discord channel or by sending us a message.