Course

State Management in Next.js

Loading...
Local State Management

All the libraries we discussed earlier are popular and widely used, but then Next.js entered the scene—especially with Next.js.

By now, we know what Next.js does, what it’s about, and how it differs from previous versions or React.js in general.

If you guessed it, you’re right. Using those libraries or methods we discussed earlier in Next.js would turn your page or component into a client-side component. This goes against the core of Next.js and its server-side capabilities.

Transitioning everything to the client side in Next.js would essentially equate to using plain React.js.

Since Redux, Context API, Zustand, and others are all hook-based patterns, we can't use them on the server side, at least not for now. So, that's the issue.

Insight

💡 Why can’t we use Hooks on the server side?

React hooks rely on the component lifecycle, which is specific to the client-side rendering environment.

Hooks like useState, useEffect, or any other aren't available on the server because they interact with the DOM, which doesn't exist on the server.

However, you can simulate some hook behavior on the server using libraries like react-dom/server, but it's not the same as client-side hooks.

So what’s the solution to this problem? Is there even one? Or should we just stick to using these libraries whenever we want, without considering anything else? What should we do?

Yes, yes, we have answers to each one of them. It's not new; in fact, it's an old-school approach that most big companies have used, but it hasn't received the attention it deserves. It's pretty underrated.

What’s it?

Loading...

0 Comments

"Please login to view comments"

glass-bbok

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account
tick-guideNext Lesson

URL State Management