NextJS + State Management = Good Idea???

next.js already does data fetching for us as well as sending that data to the components so a good question comes out do we actually need a state manager when it comes to next.js hi i'm jack harrington a principal full stack software engineer and last week i put out a video on next.js where he took a look at the different rendering modes of next.js which included client-side rendering server-side rendering and static site generation and a question i guess from ask for a viewer was hey do we need a state manager in that context and you know i thought about i'm like you know what i did a video about two months ago comparing 20 different state managers and building up at the end of it an organizational methodology where you could kind of understand the different types of state managers and choose the right one for your application so what i kind of wanted to do in this video is fuse those two topics together and give you by the end of this a github repository full of examples of different state management methodologies so what we're going to do is we're going to start off with use state and then we're going to build on top of that with use context so basic state react state management and we're going to build on top of that with react query which is very popular and then at the end we're going to take a look at four different state management methodologies here we're going to look at unidirectional state management with redux we're going to look at bi-directional state management with mobx we're going to look at atomic state management using my favorite joeti and then we're going to look at reactive state management using rxjs all right so without further ado let's go okay so here is the application that we're gonna build it is a single page application meaning that there's just a single route and it is server side rendered so we have a an endpoint that has a list of all the pokemon and by default when the page renders it's going to give you the first 20 off that list but then on the client side we want to be able to do some filtering so let's for example say bulb and get bulbasaur and that means that we have to have all of the data on the client so we have two scenarios here we have the first ssr render of the 20 pokemon and then we have the need to have all of the data client-side local to be able to look at so how do i know this is the case in this case with this version well if i go over here to view page source we can see if i do line wrap we can see that we actually have the first 20 pokemon all rendered out as html tags and then we have this enormous blob of preload data and that's all of the data coming from the rest endpoint yeah yeah that's not great but you just have to do that in this case the really cool thing is in this case we are not actually going back to that rest endpoint so if i go over here to network we can see if when we render we literally don't make any fetches off the client after we render so when i type in over here bulb this is all just state that is stored in the app so this kind of represents the challenge that people have when they think about next js and state management because in our applications most what we do is request data from an api and then render it on the page and if next js is doing that work for us if it's going and getting a lot of that data during server-side rendering or static site generation then how does estate manager play into that since that's kind of part of the role and responsibility of a state manager so that's why we're going to walk through all of the different state management models and we'll start off with a very simple use state so you can get a sense of exactly how this application works in its most simple form all right so the first thing i'm going to do is i'm going to go over to my console and then i'm going to go into my 2022 directory and i'm going to make a directory called next.js state management and then i'm going to go into that directory and from there i'm going to do yarn create and then next app and we're going to call this first one with use date so all of these are going to be with something like with zusdand or with redux or with use date or with use context and all of that of course is available to you on github for free linked to in the description down below so that you can check out the code for yourself and use it as a model in your application if you want to see how to use server-side rendering in conjunction with a state manager in your framework of choice okay let's bring this up in vs code okay now i'm going to bring up my terminal and i'm going to go into with use date and then do yarn dev and i'm going to go localize 3000 that's going to bring up next js ta-da okay so now we need to pair this down so this is our index page i'm just gonna remove most of this all right the next thing i'm gonna do is convert this to typescript and i'm gonna bring in my definition for what a pokemon looks like and our service gives back an array of pokemon each one has an id a name and an image and now i'm going to go and get that from their service by defining a git server side props where we fetch from our service and we get back our array of pokemon so it's asynchronous that's why everything is awaited and then async now if i click on this i can show you what the data looks like it's that simple array of id name and image and now let's see what we get back by just putting in here pokemon and then just doing a stringify of our data coming back and now refresh so it looks good looks like we're making the request all well and good on the server side and we're getting back that data in the client so the next thing i want to do is make it pretty so let's go back over here to our styles into home i'm just going to paste in a bunch of styles that we'll use kind of as the foundation of our grid all right so now i'm going to replace all the markup come over here back to my div okay looking pretty good we got a title of pokemon and we're just gonna go through all those pokemon just take the top 20 and then render out that image and let's take a look all right looks pretty good we've got our 20 pokemon here and we can see that we're basically following the model that i showed before so we're seeing the pokemon come in as fully rendered and then all of the data for that so now on the client side we can do our filtering so let's go implement that so the first thing i need to do is define some state for our filter so i'm going to have a use state in here and we'll use that to define our filter now we'll go and add some markup to actually give us a text box that connects to that filter and then sets the filter when we get a change let's take a look at that okay looks pretty good of course it's not actually doing the filter so we need to do is now apply that filter to that pokemon data set so to do that i'll use a use memo now that used memo is going to depend on both filter and pokemon and when either of those changes is going to return a new filtered pokemon which does our filtering for us so we'll bring in use memo and i'll bring in my filtered pokemon and that's just going to call use memo it's going to depend on filter and pokemon so when either of those changes pokemon's never going to change but filter will when filter changes it's going to then run a filter against that pokemon it's going to take each name make it lowercase and then see if it includes the filter lowercase that's going to give us some nice case and sensitive search and then we'll just take this filtered pokemon and use it for the output right here okay looks good and then i'll do bulb again beautiful nice okay all right let's go back over to our app and before we go on to the next thing i'm gonna go see if this needs any kind of typescript updates it probably does yeah okay so let's add typescript and all that all right let's run yarndev perfect nice okay so now let's try this out with context let's imagine that you have a larger app and you want to use this pokemon data in multiple places and you don't want to prop drill it so we're going to use native react context to do this so i'll go and copy this with use date into a new directory called with context so i'll go back up a directory and now i'll do copy dash r with use date and make with context all right now i'm going to go into with context and start it up okay looks like we're good so now what i want to do is create kind of a store so i'm going to go and take a lot of our code that was in that index and move it into a store so i'll go down here to with context going to that pages index and then up top here i'm just going to grab this top stuff i'm going to create a new directory called source right at the top here and in there a store.ts file i'm going to just paste that in there so now we've got our git server side props extracted and that's fine you don't have to have it in that page this just means that it can be reused in any other page which is great but we don't need head and we don't need styles and the next thing i'm going to do is i'm going to create a custom hook so we'll call that use pokemon controller and it's going to have a lot of the logic from here so i'll just take that out and paste it into use pokemon controller and use pokemon controller is going to take our list of pokemon as an input and then it's going to have a filter and set filter and it's going to turn the filtered pokemon so i'm going to return out of here an object which is going to have the filter as well as set filter as well as pokemon which will actually be the filtered version of pokemon so this is actually going to kind of hide the original data for us and it's just going to give us back the filtered pokemon okay so now to share this around as context we need to be able to create context right and also get used context while we're up here and we'll come back down here and we will create a pokemon context so what is going to be in our context well it's going to be the output of our used pokemon controller so it's going to have filter and set filter and pokemon because those are the things that we want to share around through the context and looks like github copilot has done a really nice job of hinting that so it's going to be the return type of the type of used pokemon controller so i'm just going to say we want the type of this guy and then we want the return type from that which is going to be this filter set filter in pokemon now of course we don't have that in there yet so i'm just going to start off with some empty values and now i've got our context so the next thing we need is a provider component because we want to wrap our application in this pokemon provider so i'm going to change this to store.tsx because we're going to define some jsx in here i'm going to bring in a pokemon provider and it's just going to be a react function component it's going to take pokemon as well as children and it's going to wrap the children in a pokemon context provider and then use that use pokemon controller with that pokemon to give us these values filter set filter and pokemon and that's what it's going to disseminate down the tree and then the last thing we need to do is export a use function so in this case it's gonna be use pokemon and that's just gonna use the context from this pokemon context so when we call use pokemon we're gonna get back filter set filter and pokemon regardless of where we are all right so the next thing we want to do is wrap our application in this so let's go back over to app and now we're going to bring in our pokemon provider and we're going to wrap our component in that so that's going to wrap every page in our application in a pokemon provider now one thing's missing from this though we don't have the list of pokemon so where are we going to get that well we can get that from the page props so what will happen is this index page is going to go do that get server side props and that's going to come in here as page props so it actually goes to both places it goes to the page but it also goes to the underscoreapp.js which is a special component that is defined by nexjs which is basically the app layout so we're going to put in here pokemon and then now we've got to go change our index so let's go back over here to index and okay we can take that out we need to do is bring in our version of get server-side props from the store so that is our shared version of get server side props so we're just going to export that out of here that's going to tell next.js that for this page you want to use that get server-side props from the store now if you add more pages here you're going to have to have every single page in here use this version of get server-side props because now it's expected over here in my app that every single page is going to have pokemon in it all right so let's save that out and now in the home here we will get pokemon but we don't need it because now we're going to get it through context we also don't need this interface over here what we do need is our custom hook so i'm going to go and import use pokemon from the store and then i'm going to use it down in our home function so now we're going to get pokemon's filter and set filter from our hook which is going to be context driven so i'll take that pokemon i'll put it in here for filter pokemon hit save and away we go really cool all right let's try it out bulb ah looks good okay so i know this is a lot of change but let's kind of go through it both on the server-side rendering side and on the client side so during server-side render what's going to happen is we're going to get this server-side props over here it's going to be using server-side props from here it's going to do that fetch that's going to put pokemon in the page props now that's going to go over here to our app as page props with the pokemon that's going to then seed this pokemon provider that pokemon provider is then going to call our used pokemon controller with our list of pokemon and that's going to set it in context it's going to go up here to our use pokemon controller then we're going to go and memoize that with filtered pokemon grab essentially a list of all the ones that match which is currently all of them because filter is an empty string and empty string matches is included in every single possible string so now pokemon basically just kind of drips through exactly as is so this is during the server side render time and then finally we get back to our index.tsx we use that used pokemon to get that list of pokemon and that gives us our 20 pokemon then we let's see if we actually got that so we'll go over here to our page uv page source and ca line wrap yep looks like you're good cool and of course we got all the data in the page prompts so now the ssr side is fine we're getting all the data that we expect okay so then during client-side time so i type in bulb there that is then doing a set filter which is invoking our use pokemon controller code so that's going over here and doing the same thing that we did before we're just triggering this use memo and then doing that filter and then giving us back our filtered pokemon and because we have all of the pokemon from the page props we can do the entire list all in one shot okay so let's go on to our third variant which is react query everybody's really excited about react query im2 i love react query so let's go and take our used example and re-implement it using use query this time and see how that differs so let's close these out and again i'm going to clone this one from use state so we'll start with with use date and then we'll just say with react query but i'm going to make this the simple version and then we'll get into a more complex version with hydrated state okay looks good so let's go and add react query and now let's see we've got over here in our react query simple so we're kind of back to where we started here so we've got our get service side props we got our interfaces and all that so we're just going to bring in use query and then i'm going to extract this code into a new function called get pokemon and then we're just going to wait get pokemon down here and the reason i'm doing that is because react query needs a fetcher so this is our fetcher for our pokemon and we'll rename this to be initial pokemon because this is going to see the initial data of our react query so now let's do our react query down here give the key as pokemon and then we'll say that we have got that get pokemon fetcher and now we need to use our initial pokemon so the way that we do that is we give it an option of initial data and give it our initial pokemon so let's hit save all right let's fire up our app okay and it looks like we need a query client provider so let's go over into our app and set that go back over here to our app and i'm going to bring in the query client and query client provider from react query then i'm going to create a query client and now i'm going to wrap my component in it looks good and i also need to bring in use date and let's give it a try all right looks pretty good let's uh check out the page source and looks good looks like we want everything is flowing through on the ssr side we are getting r20 with ssr so we're seeing those tags up there and then we're also getting the data and that's the initial pokemon data okay but there is one little hidden gotcha here if i go over to my inspector and then i do network if i hit refresh we can see that it actually is going off and getting the index.json again and that's just something that react query does there are some options you can give it to make it stop doing that so we'll go over here and we'll add on a refetch on mount to say no don't do that and also refetch on window focus also make that false turns out use query is a little bit promiscuous if you don't control it so let's hit refresh and we'll do again the inspector and we'll take a look at the network and we can see everything's cool we're not getting any subsequent requests for index.json all right so this is cool but there's a better way to do this in react query and it's around prefetch and hydration so let's go back and create a fourth project which we will call in this case just react query because it's not the simplified version that we did here all right let me close up some files and we'll get it started okay looks pretty good so the first thing i want to do is go back over to our index page and from react query i want to bring in dehydrate and then down in our git server side props i'm actually going to make that request but i'm going to do it slightly differently i'm going to use a query client and i'm going to pre-fetch the pokemon query and that's going to load up this query client with that data prefetched and then i'm going to instead of using initial pokemon like this i'm going to have the prop be dehydrated state and then i'm going to dehydrate that query client i'm going to take all that state that was created from any of the prefetch queries that we did in this case just the one from pokemon and dehydrate it into some state all right so then over here i don't need to do initial data pokemon anymore but there is one more thing i need to change and that's over on the app side i need to bring in this hydrate tag and use the dehydrated state from page props let's save and try this out hit refresh cool looks good i'm going to inspect to see if are we making any subsequent requests we are not that is good all right and now i'm going to go and check page source and there we go looks good all right so i think this is a cleaner model for doing react query in a server-side rendered model because take a look so if i go back over here and i'm looking at get service type props or doing that prefetch query we can make as many prefetch queries as we want that's one cool thing and that query client goes and stores all of that state for us and then down here in use query i don't actually know or care whether it's been pre-fetched i'm just saying get pokemon and if it's pre-fetched it goes off and gets the prefetch data and if it's not pre-fetched it just goes off and gets it right then which is really nice okay so the next one we're going to look at is redux and i'm actually going to bring in a already done version of redux because honestly it's a bit too much to go through in one video all right so let's go take a look at with redux now of course all of this is available to you in that github repo so you can take a look on your own with this we have a source directory with a store in it and that's got all of the redux stuff it is in redux toolkit which does make it a bit more concise so we've got our interface we've got our pokemon state this is the state of the store it's got the pokemon the search string or the filter string it's got that filtered pokemon and then it's got some state kind of nice pending or error state and then we've got the initial state of the store so again all of that just kind of set up and then we've got our async thunk to go get the pokemon that's going to go and do the work and then down here we create a slice now in redux land you can have a store that has multiple slices of data in it each one is supposed to have essentially its own semantic boundaries in this case i guess it is our pokemon slice and that's going to have our initial state and it's gotten all the searching and filtering all that so let's take a look first at this says search that's going to set that search value and then down here in our extra reducers this is going to be the stuff that monitors that get pokemon call so you're gonna have to get pokemon pending get pokemon fulfilled which means the promise has been fulfilled we've got our data so it's gonna set the pokemon in the store to that payload as well as a filtered pokemon that payload and then anytime we get a set search that's when we run our search and then down here we're going to create our store and then we're going to start pulling out some stuff from it for example the dispatcher as well as the actions and then our selectors so now over here in our page we get our selectors and we get our set search and all that and then we use use dispatch and use selector straight out of react redux now how do we kick this off so what's going to happen is we're going to do the get service side props and it's going to dispatch that get pokemon async thunk to the store and it's going to await that so that's actually going to go do the data it's going to prep that redux store in memory on the server and then it's going to pass as props the initial state of the store to that page component i'm gonna do that by viewing this get state and that's gonna have our initial state which is gonna have all our pokemon in it but also the pokemon is going to reside in memory on the server that's the current state of the model when we do our render so we're gonna come down here we're gonna have our initial state and then on the server side we're gonna ignore this use effect use effects don't run on the server so it's gonna just fly down here and start rendering out those pokemon and there you go so that's how the server side runs now how does the client side run well the client side runs starts up it's got in its initial state and now the use effect does run because it's on the client so then we're going to dispatch our rehydrate action and that's really the magic sauce here so let's go back over to the store and there's one additional method that we have here an additional action called rehydrate and this rehydrate takes all of the pokemon state that we got from the initial state and then just sets all of the values to whatever we got back in that initial state and there we go there's no actual secret sauce when it comes to redux there is a next redux wrapper but as i was doing the research for this video i kind of found that a lot of the examples were sort of behind the times and honestly i find this example a bit easier to track so let's go check it out see if it works all right so here we are in production on this and let's do our page source and it looks like we're good okay nice so if i type in something in here are we dispatching the right actions to the store indeed we are okay so this is a nice kind of walkthrough of redux if you are using redux index.js and you're looking for a modern example in next.js 12.1 that a or that doesn't in this case use that next redux wrapper feel free to pull this off the shelf and try it in your own application with your own data and see how you go all right so if you're a fan of redux you're probably a fan of that unidirectional state management model have you looked at zustand let's give it a try i think it's it's the unidirectional data model but it's much more simplified so let's try it out so again i'll shut down our server and i'm going to go back to you state on this one so i'm going to start off with the use date again and we'll just use zoostand all right now i'm going to go into my with zeus done directory and i'm going to add zustand and let's fire it up okay looks good okay so how do we use zeus done so we'll go over here to with zustand go into our pages on our index page again we're starting off with that use date version so we'll bring in create from zeus down what create does is create creates a custom hook for you it's really cool it's a necessarily a unidirectional data flow custom hook so we'll use create here to create a custom hook we'll call it pokemon store and what create does it takes a function that gets given set and get and returns an object so in this case we're gonna have an array of pokemon and we're gonna have a setter called set pokemon which is just going to set that array of pokemon and that's gonna be the basics of our store what we really need to do is we need to type this so i'm going to use a generic up here we'll say that we have our list of pokemon and then we have our set pokemon which is going to take pokemon return void okay so that's it for the basics of the store but of course we have filtering so let's bring in filter pokemon and filter and set filter so for filter pokemon and filter we'll just start off with an empty array and no filter and then we just need to implement on set filter down here so set filter is going to take our filter string it's going to get it's got a call state that gets given the current state and then we're going to set that filter and we're going to set the filter pokemon to our pokemon using the filter that we've all come to know and love okay so now we've got our hook how do we actually use this i'm gonna do use pokemon store now down here and get server side props what we're gonna do is we're going to use pokemon store but we're going to use it a little differently because we're not actually in a react component we're not in the component context so we're going to do is we're just going to say get state that's going to get the current state of that store this is something you can call externally to react which is very cool and then we do set pokemon and just give it our pokemon nice right okay now i just want to pass the pokemon through so i'm going to go over here to our pokemon i'm just going to get that from the state state dot pokemon cool that's going to have an array of pokemon and now we need to start changing out our clients i'm going to get rid of all of our local state code here and i'm going to call the use pokemon store hook that we've created and out of that i'm going to get all the stuff that we know and need so we need let's see filter and filtered pokemon and set filter probably yep that's true okay let's try it out so let's hit refresh oh nothing's coming up okay so i think i might know what the issue is so if i go back over here to sub pokemon when i set the pokemon initially i didn't also set filtered pokemon so i need to set filtered pokemon to that initial pokemon because you know it's basically the unfiltered list and there we go nice okay very cool all right so when it comes to the unidirectional dataflow model i like this a lot i mean you basically just go and get a hook that hook is by its very nature a global state hook which gives you that global behavior that you're looking for from redux but it's so much smaller so much lighter weight so easy to control ah zushan i really like it okay so another popular estate management technique is bi-directional data flow exemplified by mobx so let's go take a look at how we do this in modbacks okay let's go take a look over into our mob x directory this is gonna be another walkthrough one so over in store we now have a source store and we have a class we've got a pokemon store class it's got the list of pokemon it's got the filter string and it's got a constructor where the pokemon and the filter are observables meaning it's a bi-directional data flow you can set them and you can observe them and you can get updated whenever they change really nice actually it's a very kind of fluent easy way to manage state then we got a set pokemon this is just going to set that value you can do this or not it's basically an action uh and then we have a derived value called filtered pokemon and so this is going to change whenever this pokemon or this filter changes it's kind of like that use memo they were using before but just a more kind of oo style of this so we're gonna go and create that pokemon store that's all we really need to do and then let's go take a look over in our pages and in the index we are going to bring in our store as well as that pokemon type and we're also going to bring in observer from mobx react so observer is what you wrap your components in to say that they're reactive whenever anything that it's looking at changes then i want to be notified of that now on the get server-side props side all we're going to do is just set that pokemon value stored up pokemon and then down here we'll use that use effect trick again to set the pokemon and but you'll notice all the way down the end here will i have an observer wrapping around home meaning that any time filter changes or filtered pokemon changes home is going to automatically update so let's hit save and try it out yeah looks good okay cool so interactivity wise it's great so how for example do we set the filter well this is really cool right so all you got to do is just say hey the value of filter is just store.filter and anytime the we get a change we're going to do stored out filter equals that target value now you can be a bit more structured about this you can require the certain things to run in actions you get a bit more strict when it comes to mobx it's in a kind of loosey-goosey mode right now but as you can see when it comes to compatibility with server-side rendering and of course static site generation mobx is just fine all right two more to go thanks for sticking it out so we've got two more to look at we've got joetai which is an example of an atomic state manager and rxjs which is an example of an event-based state manager so let's start off with joetai first this is another one that we're going to walk through but it'll be quick i promise so again we'll start off with use date and into our with joe tie application i'm going to add joe tai okay looks pretty good all right so let's start out with joette let's go over here in our pages and go to our index and we're going to bring in from jotai adam and use atom now an atom is a piece of data a piece of global data so we're going to create one called pokemon atom and it's going to have an array of pokemon in it and well it can be global or it can be local it's really up to you in this case we're defining it globally so it's global and then we're going to bring in a utility function called use hydrate atoms because we have this pokemon atom down here we're going to rehydrate that in home with this pokemon data that we got from our server-side rendered props so we'll bring this in here and we'll call this initial pokemon just to kind of disambiguate it from pokemon because then we're going to go and get pokemon as an atom and the way that we do that is with use atom so we're gonna bring that in and now we've got pokemon from the pokemon atom so let's try this out hey looks pretty good so let's do bulb nice okay cool wow that was fast holy moly okay so actually you can do a little bit better when it comes to joetai so the really cool thing the reason i like joetai and recoil which is another atomic data manager but i prefer joetai so much is because you can have atoms actually depend on each other so this is really cool so basically when one atom changes when it's dependent on another it will change as well so it's very cool so we need to create a filter atom and then we're going to create a filtered pokemon atom that's going to combine those two atoms and give us back our filtered pokemon so first we'll create our filter atom and that's just going to be a string and then we're going to have our filtered pokemon atom which is an atom where you give it a function that function has a getter and then it's going to get that pokemon atom and it's going to which is an array it's going to then filter it it's going to get given every pokemon in there this is just regular array stuff and then we're going to take that name and compare it to the current get filter atom right so whenever either of these changes because you're inside this atom and you've defined this getter it's going to then update that filtered pokemon so this is going to give us that connection between the pokemon the original pokemon list and the filter and then the filter pokemon so cool okay so we need to now set this filter so let's go down here and we will get filter and set filter from our use atom of the filter atom and all we need to do and this is just the coolest thing ever is just change this pokemon atom to the filtered pokemon atom and then change this filtered pokemon down here to our pokemon hit save refresh oh that is sweet look at that that is neat so whenever i type in there i'm just doing set filter that's setting this atom thing up here this filter atom and then filter pokemon which depends on both the filter atom and the pokemon atom is dynamically updating on the fly this is so neat i mean look at the the beauty and elegance of this this is why i really like this atomic model and in particular when it comes to next.js apps i don't really think that there's a lot of global state that you might need in a lot of cases and so having the ability to have very granularized global state like this where you just okay if i need it i i get the atom if i don't need it i don't it's okay whatever is beautiful all right so the last one we're gonna look at is rxjs so let me go bring that in so let's go look at our rxjs unwantation so what is rxjs well rsjs is an event driven system so you create these subjects well like atoms in a way but they are event streams so in this case we're going to create a behavior subject and that those behavior subjects actually in this case pokemon and filter are going to be the rough equivalent of the atoms that we had before but now since there are streams to send data to them you do this next so you say the next value of pokemon is the array that we got back from our service and then we send off to our application the value the current value of that stream so the current value be the last event data that went into it in this case the array of pokemon so now that comes into home as our initial pokemon and we use our use effect trick again use effect only running ever on the client to initialize that stream to the pokemon data on the client but because we also have it on the server on the server side render time it just follows through directly down here and you get pick up your use memo and you get your filter pokemon and then how do we actually look at it well there is a really nice library called observable hooks and it gives you back a hook called use observable state and what use observable state does is it looks at any of these streams in this case pokemon or filter or whatever you want to do and it's going to give you back the state of that and when it comes to for example the filter all i'm going to do is i'm just going to call next every time i get a new value on that so i'm going to use the filter value and then filter next and that's going to give me my interactivity so let's take a look at that and i do bulb on this side beauteous awesome okay so if you're into this eventing model of state management is certainly a valid way to go uh then you can use rxjs directly or there are other libraries like effector and akita they can use also in the event oriented data management space okay so let me give you my two cents on what i would use when it comes to state management within next js honestly if i could get away with it i would use nothing i would go and just take the data from the server side props and render it that's of course if i don't need any interactivity if i need interactivity actually the first thing i'm going to do is i'm going to go with the use state use effect maybe some use context and then honestly because i'm a fan of react query i would probably layer react query on top of that certainly if i'm going to be doing any client-side data fetching and then i also get that cool prefetch stuff and everything else now if i do need something more grand i'm probably going to go if i'm in a unidirectional data style architecture i'm going to go with a zeus dunde because i think it is a really nice small elegant library that does unidirectional really really well and if i'm on my own and i just want to try something really cool i'm definitely going to go with the atomic model and something like joetai because i do think honestly when it comes to nexjs apps the amount of shared data that you have between routes should be fairly minimal i'm thinking things like the user identity the jot maybe the current card count to the current card contents those are kind of things to be global everything else should be as local as possible to where it's used all right well i hope this is really helpful for you in understanding next js and how the state management libraries and approaches relate to next.js certainly with its connection with server-side rendering and also static site generation if you have any questions or comments be sure to put that in the comments section down below if you like the video be sure to hit that like button if you really like the video hit the subscribe button and click on that bell and you'll be notified

Channel: Jack Herrington

Views: 98,290

Keywords: next js, nextjs state management, nextjs redux, next js mobx, nextjs rxjs, next js ssg, state management nextjs, blue collar coder, jack herrington next js, next js static site generation, next js state managers, next js jotai, next js zustand, next js react query, nextjs zustand, nextjs redux typescript

Id: _gRxCvDjWjs

Length: 41min 8sec (2468 seconds)

Published: Tue Mar 15 2022