Skip to main content
CourseFlix

Next.js Complex State Management Patterns with RSC

2h 56m 24s
English
Paid

In the dynamic world of web development, mastering complex state management is an essential skills. And since version 13, Next.js introduced a new type of component as the default type: server components. This new type introduced a change in the way developers should think about their logic and thus, it affected state management code and libraries.

The problem? Given the poor documentation available, some devs are getting confused trying to manage state from their server components.

This lesson aims to provide a comprehensive understanding of these concepts, enabling developers to utilize the powerful tools offered by the Next.js framework effectively.

What will we cover in this course?

Throughout the course, we'll delve into all the essential concepts required to understand how server comopnents works and how they interact with state.

The aim is to make sure you have a solid basic understanding before we jump into the problem that got you here.

So while you might already know some of these concepts, a quick refresher might come in handy.

The topics we'll cover are:

  1. State and state management in React. Here we'll go over everything you must know about state before moving forward. From the theory behind the concept of "state" on a web application, to the most commmon techniques revolving state management in React.
  2. Client components. We'll do a quick overview of the usual type of components we're all used to building but we'll delve deeper into some of the best use cases for them.
  3. Server components. Now we'll start learning about the new type of components and what are the main differences with client components. We'll go deep into the reason why they were introduced and the best use cases for them.
  4. Page architecture. Here armed with the understanding of server components, we'll look at two practical examples of how to use them to improve the loading speed and the internal architecture of two sections of our sample app.
  5. Sharing state between server and client components. The final section of the course will answer the question of how to perform proper state management having two different types of comopnents on the same application.

By the end of this course, you'll have all the tools you'll need to confidently create Next.js applications taking advantage of the most advanced features of the framework.

Additional

https://replit.com/@newlineauthors/complex-state-management-app-v2

About the Author: Fullstack.io

Fullstack.io thumbnail

Fullstack.io is the technical book and course publisher founded by Nate Murray, Ari Lerner, and team — known for the ng-book Angular series, the React Quickly books, and the fullstack React series that anchored a generation of working developers' first deep-dive into modern JavaScript framework material. Fullstack.io has since rebranded to Newline for its newer course catalog.

The book / course catalog covers the modern JavaScript framework landscape — Angular, React, Vue, GraphQL, Node.js — at the level of comprehensive reference works rather than introductory tutorials. The Fullstack.io style is unusually rigorous about the underlying APIs and edge cases that ship projects to production.

The CourseFlix listing under this source carries over 20 Fullstack.io / Newline courses spanning that range. Material is paid; the original platform sold both per-course access and membership tiers. Courses are aimed at developers ready to move past introductory tutorials into the depth of a chosen framework.

Watch Online 19 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 19 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (19)
#Lesson TitleDurationAccess
1
Introduction Demo
03:15
2
Mastering State Management in Web Development using Server and Client Components
06:12
3
Optimizing Web Application Performance with Page Architecture in Next.js
08:00
4
Understanding State in React: Best Practices and Pitfalls
08:52
5
Understanding Local and Global State in Software Development
05:52
6
Understanding and Handling Local State in React
07:44
7
Understanding State Management in React: A Comprehensive Guide to Global State and Context API
10:05
8
Utilizing Client Components in React and Next.js
06:19
9
Harnessing Client Components for Dynamic User Interactivity
03:36
10
When to Use Client Components Instead of Server Components
13:28
11
Unravelling Next.js Server Components: A Comprehensive Guide
12:17
12
Server Components vs Server-Side Rendering: A Comprehensive Guide
08:10
13
When should you use Server Components?
09:04
14
Improving Page Architecture: Strategies for Optimizing Performance and Interactivity
27:52
15
Understanding State Management in Server and Client Components
04:20
16
Sharing State Between Server and Client Components using props
10:31
17
Using cookies to share state between client and server components
14:31
18
Hydrated State: Building Interactive Applications with Server-Side APIs and Client-Side State
13:37
19
Final words about the course
02:39
Unlock unlimited learning

Get instant access to all 18 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

19 lessons · 2h 56m 24s
Show all 19 lessons
  1. 1 Introduction 03:15
  2. 2 Mastering State Management in Web Development using Server and Client Components 06:12
  3. 3 Optimizing Web Application Performance with Page Architecture in Next.js 08:00
  4. 4 Understanding State in React: Best Practices and Pitfalls 08:52
  5. 5 Understanding Local and Global State in Software Development 05:52
  6. 6 Understanding and Handling Local State in React 07:44
  7. 7 Understanding State Management in React: A Comprehensive Guide to Global State and Context API 10:05
  8. 8 Utilizing Client Components in React and Next.js 06:19
  9. 9 Harnessing Client Components for Dynamic User Interactivity 03:36
  10. 10 When to Use Client Components Instead of Server Components 13:28
  11. 11 Unravelling Next.js Server Components: A Comprehensive Guide 12:17
  12. 12 Server Components vs Server-Side Rendering: A Comprehensive Guide 08:10
  13. 13 When should you use Server Components? 09:04
  14. 14 Improving Page Architecture: Strategies for Optimizing Performance and Interactivity 27:52
  15. 15 Understanding State Management in Server and Client Components 04:20
  16. 16 Sharing State Between Server and Client Components using props 10:31
  17. 17 Using cookies to share state between client and server components 14:31
  18. 18 Hydrated State: Building Interactive Applications with Server-Side APIs and Client-Side State 13:37
  19. 19 Final words about the course 02:39

Related courses

Frequently asked questions

What is Next.js Complex State Management Patterns with RSC about?
In the dynamic world of web development, mastering complex state management is an essential skills. And since version 13, Next.js introduced a new type of component as the default type: server components. This new type introduced a change…
Who teaches Next.js Complex State Management Patterns with RSC?
Next.js Complex State Management Patterns with RSC is taught by Fullstack.io. You can find more courses by this instructor on the corresponding source page.
How long is Next.js Complex State Management Patterns with RSC?
Next.js Complex State Management Patterns with RSC contains 19 lessons with a total runtime of 2 hours 56 minutes. All lessons are available to watch online at your own pace.
Is Next.js Complex State Management Patterns with RSC free to watch?
Next.js Complex State Management Patterns with RSC is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Next.js Complex State Management Patterns with RSC online?
Next.js Complex State Management Patterns with RSC is available to watch online on CourseFlix at https://courseflix.net/course/next-js-complex-state-management-patterns-with-rsc. The page hosts every lesson with the integrated video player; no download is required.